Transparenz
Tom
- css
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:
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
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
@@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'
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
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
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
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
@@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'
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