it-swarm.com.de

HTML/CSS-Texthintergrund transparent, Text jedoch nicht

Ich habe also ein Problem. Ich habe mich umgesehen und umgesehen, aber kein Glück. Ich möchte den Hintergrund meines Körpers transparent machen, den Text aber nicht transparent lassen. So wie es jetzt ist, mache ich immer die gleiche Deckkraft. Hier ist mein Code: 

@charset "utf-8";
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #42413C;
    margin: 0;
    padding: 0;
    color: #000;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { 
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
    padding-right: 15px;
    padding-left: 15px;
    opacity:1;
}
a img { 
    border: none;
}
a:link {
    color: #42413C;
    text-decoration: underline;
}
a:visited {
    color: #6E6C64;
    text-decoration: underline;
}
a:hover, a:active, a:focus {
    text-decoration: none;
}
.container {
    width: 750px;
    margin: 0 auto;
}
.content {
    padding:20px;
    width:710px;
    position:relative;
    background:#CCC;
    opacity: 0.5;
}
.fltrt {
    float: right;
    margin-left: 8px;
}
.fltlft { 
    float: left;
    margin-right: 8px;
}
.clearfloat { 
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.header {
    top:0%;
    width: 750px;
    height: 200px;
    background-image: url(images/header.png);
    background-repeat:no-repeat;
    background-position:center;
}
.navbar {
    height: 50px;
    width: 750px;
    position: relative;
    z-index: 2;
}
#bg {
    position: fixed;
    top: 25%;
    left: 15%;
    z-index: -1;
}
div {
display: block;
}

Hier ist meine Website (klicken Sie nicht auf den Link "tccraft.net" in Ihre URL, um zu einer Facebook-Seite zu gelangen): http://tccraft.net/index.php Vielen Dank!

61
tec4

Verwenden Sie nicht opacity, sondern setzen Sie den Hintergrund auf einen RGBA-Wert, um den Hintergrund nur halbtransparent zu machen. In Ihrem Fall wäre es so.

.content {
    padding:20px;
    width:710px;
    position:relative;
    background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
    background: rgba(204, 204, 204, 0.5);
}

Siehe http://css-tricks.com/rgba-browser-support/ für weitere Informationen und Beispiele für rgba-Werte in css.

128

Für einen vollständig transparenten Hintergrund verwenden Sie: 

background: transparent;

Ansonsten für eine halbtransparente Farbfüllung: 

background: rgba(255,255,255,0.5); // or hsla(0, 0%, 100%, 0.5)

wo die Werte sind:

background: rgba(red,green,blue,opacity); // or hsla(hue, saturation, lightness, opacity)

Sie können auch rgba-Werte für Farbverlaufshintergründe verwenden.

Um Transparenz für einen Bildhintergrund zu erhalten, reduzieren Sie einfach die Deckkraft des Bildes in einem Bildeditor Ihrer Wahl.

11
James Coyle

opacity macht Text und Hintergrund transparent. Verwenden Sie stattdessen eine halbtransparente Hintergrundfarbe, indem Sie beispielsweise einen rgba()-Wert verwenden. Funktioniert mit IE8 +

2
FelipeAls

Wenn Sie RGBA für moderne Browser verwenden, müssen Sie nicht zulassen, dass ältere IEs nur die nicht transparente Version der angegebenen Farbe mit RGB verwenden.

Wenn Sie sich nicht an reine CSS-Lösungen halten, geben Sie CSS3PIE a ein. Mit dieser Syntax sehen Sie in älteren IEs genau das gleiche Ergebnis, das Sie in modernen Browsern sehen:

div {
    -pie-background: rgba(223,231,233,0.8);
    behavior: url(../PIE.htc);
}
0
BL_