Transparentes <div> über einem Bild, aber undurchsichtiger Text.

Question

Ich habe den folgenden HTML-Code, der einfach ein Bild mit einem transparenten schwarzen Überlagerung enthält.

Ich möchte nicht, dass mein Text transparent ist. Ich habe es mit z-index versucht, aber mein Text ist immer noch transparent:

Was ist falsch an meinem Code?

Dies ist mein HTML:

             Hockey
             Beispiels Text

     ...

und das ist mein CSS:

.hilight h2{
    font-family: Helvetica, Verdana;
    color: #FFF;
    z-index: 200;
}

.promo {
    position: relative;
}
.promo img {
    z-index: 1;
}

.hilight {
    background-color: #000;
    position: absolute;
    height: 85px;
    width: 415px;
    opacity: 0.65;
    font-family: Verdana, Geneva, sans-serif;
    color: #FFF;
    bottom: 0px;
    z-index: 1;
}

Answer 1

Ändern Sie den Hintergrund von .hilight in rgba(0,0,0,0.65) und entfernen Sie die Opazität.

.hilight {
 background-color: rgba(0,0,0,0.65);
 position: absolute;
 height: 85px;
 width: 415px;
 font-family: Verdana, Geneva, sans-serif;
 color: #FFF;
 bottom: 0px;
 z-index: 1;
}

Answer 2

Sie müssen die Opazität nur auf den Hintergrund setzen, nicht auf das gesamte

und dessen Inhalt. Dies kann mit der rgba-Farbauswahl erfolgen.

div {
   background: rgba(0,0,0,0.50);
}

Der andere Weg, es zu tun, wäre die Verwendung eines halbtransparenten png-Bildes mit etwas background-position. Dies wäre dann multibrowserkompatibel.

Answer 3

Für eine Unterstützung verschiedener Browser verwenden Sie am besten ein transparentes 1x1 Pixel-PNG-Bild.
Sie können das Bild auf dieser Webseite generieren: http://www.1x1px.me/
Entfernen Sie dann einfach background-color und opacity und verwenden Sie einfach background:url(bg.png);

jsFiddle Live Demo

Answer 4

Alles innerhalb des

wird die Deckkraft von 0.65 haben. Verschiebe den Text außerhalb des Overlay-Divs.