Set Opazität in dem Menü aber halten Text undurchsichtig in CSS

Question

Wie kann ich ein Menü zu erstellen, die nur ihr Hintergrund transparent ist? Der Text sollte undurchsichtig halten (Opazität: 1)

Wenn ich gesetzt

li:hover {
    opacity: 0.5
}

Das ganze Listenelement wird transparent. Wie kann ich das Problem beheben?

Answer 1

Es gibt einen neuen Wert in CSS3 „RGBA“ genannt, dass Sie eine transparente Farbe als Hintergrundfarbe verwenden. Zum Beispiel:

li:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

Ich bin ziemlich sicher, dass funktionieren soll, obwohl ich schrieb nur den Code an Ort und Stelle, so kann es nicht. Dies wird jedoch, geben Sie Ihrem Menü einen weißlich Hauch es. Wenn Sie wollen, gehen Sie hier allerdings mehr über RGBA, lesen: http: // CSS-Tricks. com / rgba-Browser-Unterstützung /

Answer 2

Sie müssen entweder ein transparentes PNG-Bild verwenden, oder einen rgba Farbwert , für den Hintergrund der <li>, zum Beispiel:

li:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

Oder:

li:hover {
    background: url(a-nice-semi-transparent-png-image.png);

    /* Supplying just the image file here will make the browser repeat the image
    file vertically and horizontally, thus taking up all the space, just like a 
    colour would */
}

Answer 3

Ich glaube nicht, das möglich ist, versuchen Sie folgendes Beispiel: http://jsfiddle.net/578SV/

Answer 4

Sie können nicht. Der Transparenzgrad wird auf alle untergeordneten Elemente weitergegeben.

Ihre Optionen:

• Stellen Sie ein weiteres Element auf der Oberseite des li, möglicherweise position: absolute verwenden, die eine normale Opazität Einstellung hat

• Verwenden Sie eine PNG-Datei mit Alpha-Transparenz des Opazität Effekt (Müssen Abhilfen für Arbeit in IE6)

erstellen

• Mit der neuen rgba Farbeigenschaft, wie durch @hatkirby gezeigt, wenn Sie mit der unvollständigen Browser-Unterstützung leben können