Teiltransparente divs

25.2.2010 von ponnath.

Seit CSS3 gibt es die opacity-Definitionen, mit deren Hilfe man einen Milchglaseffekt erzeugen kann: durch den so definierten Bereich kann man dann - mehr oder weniger transparent - den Hintergrund scheinen sehen.

Wendet man das auf einen div-Container an, dann ergeben sich so interessante gestalterische Effekte. Allerdings tritt dabei das Problem auf, daß daß nicht nur der Hintergrund des divs durchscheinend wird, sondern auch alle darin enthaltenen Inhalte (Texte, Bilder, etc.). Das ist oft nicht so beabsichtigt.

Im Netz finden sich mehrere Lösungsansätze, z.B.
Dirk Jesse Transparente Hintergründe mit CSS (crossbrowser) - High Resolution Weblog
<http://www.highresolution.info/weblog/entry/transparente_hintergruende_mit_css/>
setzt auf ein zusätzliches div.

Eric Eggert yatil!: Cross-Browser rgba()
<http://yatil.de/Weblog/cross-browser-rgba> opfert die
Rückwärtskompatibilität und setzt auf rgba

Oder man arbeitet mit einem teiltransparenten PNG.

Die beiden Ansätze funktionierten bei mir nicht, jedenfalls nicht mit dem aktuellen IExplorer 8.0.6001… Ich vermute, das lag an etwas seltsamen
Zeilen:
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
bzw.
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF);

Und auch die Sache mit dem teiltransparenten PNG habe ich erstmal beiseite gelassen.

Stattdessen konnte ich das Problem dadurch lösen, daß ich einfachzwei divs definiert habe, exakt an der gleichen Position und mit gleicher Größe.

Das erste div hat diese Eigenschaften:

.opakbox {
…
background-color: White;
/* fuer IE */
filter: alpha(opacity=60);
/* Standard CSS3 */
opacity: 0.6;
}

Das ist das teiltransparente div. Es muß genau unter dem nächsten liegen - notfalls mit Festlegungen in der z-Ebene. Bei mir wird es einfach vor den
anderen aufgerufen.

Das zweite div unterscheidet sich von diesem lediglich durch das Weglassen der opacity-Definitionen und es enthält sicherheitshalber noch die Festlegung der
Hintergrundfarbe auf transparent:

.transbox{
…
background-color: transparent;
}

Mir scheint das die sauberste Lösung zu sein. Bisher habe ich sie auf folgenden Browsern ausprobiert: MsIE 7.0.5730 und 8.0.6001, Firefox 3.6,
Opera 9.10, Safari 4.0.4, Google Chrome 4.0.249 unter Windows XP, Safari 4.0.4 unter Mac, Iceape 1.0.9 und Konqueror 3.5.9 unter Linux. Letzterer
beherrscht offenbar die opacity-Definitionen nicht und stellt den Hintergrund weiss dar. Da hilft auch die angeblich dafür funktionierende Anweisung
-khtml-opacity: 0.6;
nicht. Weitere (und ältere) Browser werde ich ausprobieren, wenn die Seite über das Internet erreichbar ist.

Geschrieben in Allgemein | Keine Kommentare »