HTML / CSS-Texthintergrund transparent, aber Text nicht

So, ich habe ein problem. Ich schaute herum und sah sich um, aber kein Glück. Ich würde gerne den hintergrund von meinem Körper durchsichtig, aber lassen Sie den text nicht transparent. So wie es jetzt ist ich halten 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 dont Typ "tccraft.net" in der url, es wird Sie ergreifen, um eine facebook-Seite): http://tccraft.net/index.php
Danke!

Kommentar zu dem Problem

InformationsquelleAutor der Frage tec4 | 2013-03-16

  1. 105

    Nicht verwenden opacity für diese, stellen Sie den hintergrund auf ein RGBA-Wert, statt nur den hintergrund halb transparent. In deinem Fall würde es so sein.

    .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);
}

    Sehen http://css-tricks.com/rgba-browser-support/ für weitere Informationen und Proben von rgba-Werten im css.

    InformationsquelleAutor der Antwort Karl-Johan Sjögren

  2. 10

    Für einen voll transparenten hintergrund verwenden: 

    background: transparent;

    Sonst für eine semi-transparente Farbe füllen verwenden: 

    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)

    Können Sie auch verwenden, rgba-Werte für Hintergründe mit Farbverlauf.

    Um Transparenz in einem Bild auf den hintergrund reduzieren Sie einfach die Deckkraft des Bildes im Bild-editor Ihrer Wahl vorher.

    InformationsquelleAutor der Antwort James Coyle

  3. 1

    opacity sowohl text und hintergrund transparent. Benutzen Sie einen semi-transparenten hintergrund-Farbe statt, indem ein rgba() Wert zum Beispiel. Funktioniert auf IE8+

    InformationsquelleAutor der Antwort FelipeAls

  4. 0

    Wenn Sie die Verwendung von RGBA-für moderne Browser, die Sie nicht benötigen, lassen Sie ältere IEs verwenden Sie nur die nicht-transparente version der Farbe mit RGB.

    Wenn Sie don ' T-stick auf CSS-only-Lösungen, geben CSS3PIE versuchen. Mit dieser syntax können Sie finden genau das gleiche Ergebnis in älteren IEs, die Sie sehen in modernen Browsern:

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

    InformationsquelleAutor der Antwort BL_

Schreibe einen Kommentar