Den Texthintergrund transparent machen, aber nicht den Text selbst

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, aber den Text nicht transparent lassen. Wie es jetzt ist, mache ich beide 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 auf den Link, geben Sie nicht "tccraft.net" in Ihre URL ein, um zu einer Facebook-Seite zu gelangen): http://tccraft.net/index.php Vielen Dank!

Verwenden Sie opacitydies nicht, 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);
}

Weitere Informationen und Beispiele für rgba-Werte in CSS finden Sie unter http://css-tricks.com/rgba-browser-support/ .

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

background: transparent;

Andernfalls verwenden Sie 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 Verlaufshintergründe verwenden.

Um Transparenz auf einem Bildhintergrund zu erhalten, reduzieren Sie einfach die Deckkraft des Bildes in einem Bildeditor Ihrer Wahl.

opacitymacht sowohl Text als auch Hintergrund transparent. Verwenden Sie stattdessen eine halbtransparente Hintergrundfarbe, indem Sie rgba()beispielsweise einen Wert verwenden. Funktioniert mit IE8 +

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

Wenn Sie sich nicht an reine CSS-Lösungen halten, probieren Sie CSS3PIE aus . Mit dieser Syntax können Sie in älteren IEs genau das gleiche Ergebnis sehen wie in modernen Browsern:

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

box-shadow: inset 1px 2000px rgba(208, 208, 208, 0.54);