Transparenz

[Tom]

Hello,

ich habe mich mal probeweise an die Transparenz herangewagt, seitdem das die meisten Browser inzwischen unterstützen. Leider bekomme ich es nicht so hin, wie ich will:

http://candle-light-night.com

Der Hintergrund des Divs "box" soll transparent erscheinen, die schwarze Schrift aber nicht. Könnt Ihr mir helfen, wie ich das anstellen muss?

Muss ich da zwei Divs übereinander legen?

opacity:none;

scheint es ja nicht zu geben.
Mit Opacity:0.0; ist die Schrift dann ganz weg.

Was muss ich denn da machen?

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Der Martin]

Hallo Tom,

ich habe mich mal probeweise an die Transparenz herangewagt, seitdem das die meisten Browser inzwischen unterstützen. Leider bekomme ich es nicht so hin, wie ich will:
http://candle-light-night.com
Der Hintergrund des Divs "box" soll transparent erscheinen, die schwarze Schrift aber nicht.

dann solltest du nicht das Element an sich semitransparent machen, sondern ihm eine teiltransparente Hintergrundfarbe geben.

Muss ich da zwei Divs übereinander legen?

Ich bitte dich!

Mit Opacity:0.0; ist die Schrift dann ganz weg.

Ja, weil opacity nicht nur auf den Hintergrund wirkt, sondern auch auf den Elementinhalt.

background-color: rgba(192,192,192,0.25);

Should do the trick. Mit den Werten natürlich nach Belieben spielen.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

background-color: rgba(192,192,192,0.25);

Should do the trick.

hsla(0, 0%, 75%, 0.25) ist der bessere Trick. (Künftig auch hsla(0deg, 0%, 75%, 0.25).)

Zum einen ist das HSL-Modell intuitiver, zum anderen hat man bei Änderung des Grauwertes einen single point of change.

Qapla'

[Der Martin]

Hallo,

hsla(0, 0%, 75%, 0.25) ist der bessere Trick. (Künftig auch hsla(0deg, 0%, 75%, 0.25).)

Zum einen ist das HSL-Modell intuitiver, zum anderen hat man bei Änderung des Grauwertes einen single point of change.

dein erstes Argument ist Ansichtssache (ich komme zwar mittlerweile auch mit HSL einigermaßen klar, finde mich mit RGB aber immer noch besser zurecht), das zweite ist allerdings ein klarer +. (Pluspunkt) für HSL.

Ciao,
 Martin

[Tom]

Hello Martin und Gunnar,

hsla(0, 0%, 75%, 0.25) ist der bessere Trick. (Künftig auch hsla(0deg, 0%, 75%, 0.25).)

Zum einen ist das HSL-Modell intuitiver, zum anderen hat man bei Änderung des Grauwertes einen single point of change.

Eure Tipps sind für die neueren Browser klasse. Aber was mache ich mit dem IE8, der schließlich immer noch im Einsatz ist? Der streikt an dieser Stelle. Oder sollte ich für den bedingtes CSS einbauen?

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Matthias Apsel]

Om nah hoo pez nyeetz, Tom!

Eure Tipps sind für die neueren Browser klasse. Aber was mache ich mit dem IE8, der schließlich immer noch im Einsatz ist? Der streikt an dieser Stelle. Oder sollte ich für den bedingtes CSS einbauen?

foo {
   background: url(transparentes Bild) repeat ... hsla(0, 0%, 75%, 0.25);
   background: hsla(0, 0%, 75%, 0.25);
}

Beachte den Unterschied zwischen background und background-color: wiki, dort Beachten Sie

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

foo {
   background: url(transparentes Bild) repeat ... hsla(0, 0%, 75%, 0.25);
   background: hsla(0, 0%, 75%, 0.25);
}

Korrektur:

foo {  
   background: url(transparentes Bild) repeat ... transparent;  
   background: hsla(0, 0%, 75%, 0.25);  
}

Matthias

[Gunnar Bittersmann]

@@Tom:

nuqneH

Eure Tipps sind für die neueren Browser klasse. Aber was mache ich mit dem IE8, der schließlich immer noch im Einsatz ist?

Ohne jetzt genau zu recherchieren würde ich mal in die Runde werfen, dass Browser, die hsl(a) nicht unterstützen, auch rgba nicht kennen. Ein Fallback (Bild oder Verzicht auf Transparenz) ist also sowieso vonnöten.

Qapla'

[Der Martin]

Hallo,

Eure Tipps sind für die neueren Browser klasse. Aber was mache ich mit dem IE8, der schließlich immer noch im Einsatz ist? Der streikt an dieser Stelle. Oder sollte ich für den bedingtes CSS einbauen?

AFAIK unterstützt der IE8 im Gegensatz zu seinem Vor-Vorgänger wenigstens teiltransparente PNGs. Endlich. Der Fallback könnte also ein PNG mit Alphatransparenz als Hintergrundbild sein.

Ciao,
 Martin