Stellen Sie "Deckkraft", um das Menü, sondern halten Sie text undurchsichtig in CSS

Wie kann ich ein Menü erstellen, welches nur dessen hintergrund transparent ist? Der text sollte halten deckend (Deckkraft: 1)

Wenn ich

li:hover {
    opacity: 0.5
}

Die ganze Liste Element wird transparent. Wie behebe ich das?

InformationsquelleAutor Rodrigo Souza | 2010-08-19

  1. 7

    Gibt es einen neuen Wert in CSS3, genannt "par", mit dem Sie eine transparente Farbe als hintergrund-Farbe. Zum Beispiel:

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

    Bin ich ziemlich sicher, dass sollte funktionieren, obwohl ich nur schrieb den code auf der Stelle, so dass es möglicherweise nicht. Dies wird jedoch, geben Sie Ihren Menü ein weiß-ish Farbton. Wenn Sie mehr Lesen möchten über PAR, obwohl, gehen Sie hier: http://css-tricks.com/rgba-browser-support/

    Das ist die einfachste Lösung, aber IE und FF2 Unterstützung sind big Nachteile
    Für den OP: beachten Sie, dass CSS3 ist nicht kompatibel mit allen Browsern noch. Wenn das stört Sie, das ist eine tolle Antwort.
    Mich zu schlagen. Haha
    Gibt es eigentlich einen hack, mit dem RGBA-Effekt für Internet Explorer mithilfe des "filter:progid:DXImageTransform.Microsoft.gradient" - Eigenschaft, die Microsoft gemacht. Es gibt mehr Informationen darüber in der Artikel, den ich verlinkt. Ich weiß nicht, FF2, obwohl.

    InformationsquelleAutor hatkirby

  2. 0

    Benötigen Sie entweder ein transparentes PNG-Bild, oder eine rgba - Wert Farbe, für die <li>'s hintergrund, z.B.:

    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 */
}

    InformationsquelleAutor Paul D. Waite

  3. 0

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

    InformationsquelleAutor davehauser

  4. 0

    Können Sie nicht. Die Transparenz wird überliefert, um alle untergeordneten Elemente.

    Ihre Optionen:

    • Legen Sie ein weiteres element auf der Oberseite des li möglicherweise position: absolute hat, dass eine normale Deckkraft

    • Verwenden Sie eine PNG-Datei mit Alpha-Transparenz zu schaffen, die Deckkraft-Effekt (müssen workarounds arbeiten im IE6)

    • Verwenden Sie die neue rgba Eigenschaft Farbe, wie gezeigt, durch @hatkirby, wenn Sie Leben können mit der unvollständigen browser-Unterstützung

    InformationsquelleAutor Pekka 웃

Schreibe einen Kommentar