Transparenz wirkt sich auf Kind-Elemente aus

Hallo!

Ich habe einem DIV mit einer Breite und Höhe von 100% über CSS einen Transparenz-Effekt verpasst. Innerhalb dieses DIV befindet sich ein weiteres DIV, das jedoch nicht transparent sein soll. Daher habe ich den Transparenz-Wert für dieses auf 1.00 gesetzt. Leider ist es aber so, dass dessen Werte zwar durchaus angewandt werden, jedoch kann die Transparenz damit nicht ganz abgeschaltet werden.

Kann sich jemand erklären, woran dies liegen könnte und wie sich dies vielleicht lösen ließe?

MfG
Pascal

Hallo Pascal,

die Transparenz eines Elements gilt für dieses Element und alle seine Kinder inklusive Textknoten. Daran lässt sich nichts ändern und das entspricht auch dem Verhalten, wie man es auch von SVG kennt.

Lösen lässt sich das Problem nur durch absolute Positionierung eines opaken Containers, der kein Nachfahre des (semi)transparenten sein darf, und idealerweise ein nachfolgendes Geschwisterelement ist (nextSibling).

Gruß,

Amica

Hallo Amica!

Danke für die Info. Ich habe nun aber noch eine andere Lösung gefunden, die - zumindest in meinem Fall - einfacher und besser ist. Dazu habe ich für den Transparenz-Effekt eine PNG-Grafik mit 70% Alpha-Transparenz als Hintergrund verwendet. Dadurch sind die CSS-Angaben für die Transparenz nicht mehr erforderlich und es funktioniert so, wie ich es möchte.

MfG
Pascal

Jep, das geht natürlich auch, wird aber im IE 6 und drunter opak angezeigt, obwohl das in diesem Fall sicher auh verkraftbar ist.

Über derart veraltete Browser mache ich mich schon lange keine Gedanken mehr. Daher ist es mir auch relativ egal, wie es in diesen dargestellt wird.

Zitat von AmicaNoctis

Jep, das geht natürlich auch, wird aber im IE 6 und drunter opak angezeigt, obwohl das in diesem Fall sicher auh verkraftbar ist.

Wobei sich hier auch die Frage stellt, ob der IE<=6 überhaupt Transparenzen im CSS versteht... ;-)

Zitat von Abraxax

Wobei sich hier auch die Frage stellt, ob der IE<=6 überhaupt Transparenzen im CSS versteht... ;-)

Manchmal erkennt man halt das offensichtlichste nicht.

Zitat von Abraxax

Wobei sich hier auch die Frage stellt, ob der IE<=6 überhaupt Transparenzen im CSS versteht... ;-)

Zumindest filter:Alpha() kennt er schon seit 5.5.

Zitat von pascaluhlmann

Über derart veraltete Browser mache ich mich schon lange keine Gedanken mehr. Daher ist es mir auch relativ egal, wie es in diesen dargestellt wird.

Lässt sich aber für background-images die keine extra CSS Eigenschaften benötigen wie Positionierung etc. recht einfach realisieren:

Wie kann man PNG-Alphatransparenz im IE nutzen? - jeenaparadies.net

Mit etwas getrickste sogar für img-tags.

Zitat von Caine Luveno

Lässt sich aber für background-images die keine extra CSS Eigenschaften benötigen wie Positionierung etc. recht einfach realisieren:

Was dann aber teilweise wieder andere, graviernde Nachteile mit sich bringen kann (Nicht-Nutzbarkeit von Links bspw.).