Transparenter div-hintergrund mit einem Farbton der Farbe?

Kann mir jemand sagen, wie man eine div-hintergrund transparent, aber mit einem Farbton der Farbe, wie schwarz. Ich habe versucht, diese mit CSS kann ich zwar nur die div-entweder transparent oder gefüllt mit Farbe.
Vielen Dank für die Hilfe!

Vielen Dank an alle für die Antworten. Ich habe es nun sortiert. Danke!

InformationsquelleAutor Joey Morani | 2010-04-07

  1. 5

    Gibt es opacity als pro Pekka Antwort, aber es wird der Inhalt des div-transparent, ebenso wie der hintergrund. Wenn das ist nicht, was Sie wollen, könnten Sie:

    1. habe zwei divs, eines mit opacity/alpha agiert als hintergrund, und andere Feste ein, die für den Inhalt positioniert. Aber die Positionierung kann schwierig sein, für variable-size-Elemente. Oder,

    2. verwenden Sie eine semi-Opak hintergrund, entweder durch Verwendung eines rgba() Farbe (in anderen Browsern als IE), oder eine PNG-hintergrund Bild mit einem alpha-Kanal (der funktioniert in IE7-8, braucht aber eine AlphaImageLoader - fix für IE6, was auch bedeutet, Sie haben, um das Bild so groß, wie Sie möglicherweise benötigen könnten, wie AlphaImageLoader nicht gesehen).

    InformationsquelleAutor bobince

  2. 6

    Gibt es eine weitere option ( obwohl nicht unterstützt, die in allen Browsern ). Die Verwendung von rgba():

    /* apply a shade of seafoam green (50% transparent) to "tinted" class */
.tinted {    
    background-color: rgba(129,254,188,0.5);
}

    Hier ist eine schöne einfach, um Artikel zu Lesen auf ein paar Methoden.

    Dinge sind eine ganze Menge einfacher, wenn Sie kümmern sich nicht um IE6.

    InformationsquelleAutor Armstrongest

  3. 3

    Können Sie opacity (und der IE Geschwister alpha).

    Quirksmode.org hat eine gute Liste, wie zu erreichen ist, die konsequent in den meisten Browsern.

    Nicht eine große Lösung, wenn Sie wollen, nur einen hintergrund, getönt, aber es funktioniert.
    wahr. Ich habe irgendwie das overread, Teil - Tönung einen hintergrund in einer dynamischen, große element, das PNG ist definitiv der Weg zu gehen, unter Berücksichtigung der @bobince die Kommentare. Es ist noch zu früh für rgba, da kein IE unterstützt - sonst wäre der eleganteste Weg, die Hände nach unten.

    InformationsquelleAutor Pekka 웃

  4. 2

    Oder Sie können ein PNG-semi-transparentes Bild. Oft ist der einfachste Weg, verursachen beim spielen mit opacity Sie auch ändern Sie die Deckkraft des Textes.

    Guter Punkt. Nur ist zu beachten, semi-transparente PNGs benötigen einen workaround im IE6 zu arbeiten. Und ein Wort der Warnung, Sie niemals zu kombinieren, semi-transparente PNGs mit opacity hat, wirkt es bis in alle IE-Browser einschließlich 8. Verwenden Sie entweder eine Methode oder die andere, aber nie beides zusammen in einem element.
    Stellen Sie sicher, Sie verwenden ein Programm wie PNGOutWin (ardfry.com/pngoutwin) um das Bild zu komprimieren, bevor Sie Sie verwenden, so dass Sie nicht kauen die ganze Bandbreite durch.
    Warum die Mühe, wenn Sie könnten, benutzen Sie ein real-css - semi-transparenten hintergrund?
    Das ist fast 4 Jahre alt, deshalb

    InformationsquelleAutor ThoKra

  6. 0

    Hier ist ein jQuery-plugin, das alles für Sie, Transify http://jorenrapini.com/blog/css/transify-a-jquery-plugin-to-easily-apply-transparency-opacity-to-an-elements-background

    Ich lief in dieses problem jedes jetzt und dann, so entschied ich mich, etwas zu schreiben, das würde das Leben viel einfacher. Das Skript ist weniger als 2 Kb, und es erfordert nur 1 Zeile code, um es zu arbeiten, und es behandelt auch das animieren der Deckkraft der Hintergrundfarbe, wenn Sie mögen.

    InformationsquelleAutor joren

Schreibe einen Kommentar