Transparenz wieder aufheben

[Phil Z.]

Hallo.

Ich habe einen Div den ich für den
Mozilla mit -moz-opacity:0.5
und für den IE mit filter:alpha(opacity=50)
transparenz mache.

Dasklappt auch mit beiden Browsern ganz gut. Nun ist ja der Nachteil, das die Schrift auch transparent wird und das Schwarz plötzlich grau ist und schlecht lesbar.
Gibt es eine Möglichkeit das für die Schrift wieder rückgängig zu machen?

Mein Versuch:

<span class='umkehrung'>TEXT</a>

.umkehrung{filter:alpha(opacity=100) !important;-moz-opacity:1 !important}

Aber leider funktioniert das in keinem der beiden Browser.
Gibts es da eine Lösund bzw. ein Workaround?

mfg

Phil Z.

[Orlando]

-moz-opacity:0.5
filter:alpha(opacity=50)

Und was ist mit Browsern, die grundsätzlich Transparenz beherrschen, aber keine dieser proprietären Eigenschaften?

.umkehrung{filter:alpha(opacity=100) !important;-moz-opacity:1 !important}

Aber leider funktioniert das in keinem der beiden Browser.
Gibts es da eine Lösund bzw. ein Workaround?

Ja: PNG.

Roland

[Phil Z.]

Hi.

Aber leider funktioniert das in keinem der beiden Browser.
Gibts es da eine Lösund bzw. ein Workaround?

Ja: PNG.

Ja, das war mir klar aber ich will es wenns geht ohne ein img lösen.

mfg

Phil Z.

[Ulrich]

Moin,

Ja, das war mir klar aber ich will es wenns geht ohne ein img lösen.

Wird nicht gehen, fürchte ich. Jedenfalls kenne ich keinen Weg opacity (filter:opacity) nur für den Background gelten zu lassen und für den Inhalt nicht. (Ich würde sogar behaupten es gibt keinen)
Entweder mit png, oder gif - oder mit opacitiy und einen zweiten Layer ohne Transparenz und den Text beinhaltend darüber legen.

mit freundlichen Grüßen
Ulrich

[Cheatah]

Hi,

Ja, das war mir klar aber ich will es wenns geht ohne ein img lösen.

dann warte auf eine hinreichend weite Verbreitung von CSS/3.0, und verwende das rgba()- oder hsla()-Farbschema für die Hintergrundfarbe. Schon in wenigen Jahren wirst Du dann voraussichtlich nur noch für den IE die Entscheidung treffen müssen, ob Du einen aufwändigen Workaround findest oder ihn vom Effekt ausschließt.

Cheatah

[Auge]

Hallo

Ich habe einen Div den ich für den
Mozilla mit -moz-opacity:0.5
und für den IE mit filter:alpha(opacity=50)
transparenz mache.

Dasklappt auch mit beiden Browsern ganz gut. Nun ist ja der Nachteil, das die Schrift auch transparent wird und das Schwarz plötzlich grau ist und schlecht lesbar.

Das kommt daher, dass diese Eigenschaft(en) auf den Inhalt angewendet und an die Kindelemente weitervererbt wird.

Gibt es eine Möglichkeit das für die Schrift wieder rückgängig zu machen?

<span class='umkehrung'>TEXT</a>

.umkehrung{filter:alpha(opacity=100) !important;-moz-opacity:1 !important}

Dies bewirkt, dass der <span> innerhalb des teiltransparenten Elements 100% der opacity des Elements erhält. Dies sind 100% von 50%. Die Vererbung, du weißt ...

Aber leider funktioniert das in keinem der beiden Browser.
Gibts es da eine Lösund bzw. ein Workaround?

Das Element mit dem Inhalt müsste _vor_ einem Element mit der Transparenz dargestellt werden bzw. das Element mit dem teiltransparenten Hintergrund muss hinter das/die Elemente mit dem Inhalt kommen (Stichworte: z-index, position).

Zum Grundverständnis der zur Verfügung stehenden Techniken (es geht ja auch anders) incl. Vor- und Nachteile sowie (In)kompatibilitäten empfehle ich dir diesen Artikel.

Tschö, Auge

[Cheatah]

Hi,

Dasklappt auch mit beiden Browsern ganz gut. Nun ist ja der Nachteil, das die Schrift auch transparent wird und das Schwarz plötzlich grau ist und schlecht lesbar.

nicht der Nachteil, sondern das Ziel.

Das kommt daher, dass diese Eigenschaft(en) auf den Inhalt angewendet

Genauer gesagt: Auf das Element.

und an die Kindelemente weitervererbt wird.

Nein, opacity wird nicht weitervererbt. Andernfalls hätte ein Kind bereits eine Deckkraft von 25%, dessen Kind eine von 12.5% usw. Es ist schlicht und ergreifend das _Element_ teiltransparent. Nicht mehr, aber auch nicht weniger.

Das Element mit dem Inhalt müsste _vor_ einem Element mit der Transparenz dargestellt werden bzw. das Element mit dem teiltransparenten Hintergrund muss hinter das/die Elemente mit dem Inhalt kommen (Stichworte: z-index, position).

Wenn das Ziel ist, einen teiltransparenten Hintergrund zu haben, sollte man einen teiltransparenten Hintergrund verwenden, nicht das Element teiltransparent machen und irgend welche Kunstücke mit anderen, hierarchisch falsch eingeordneten Elementen fabrizieren.

Cheatah