Transparente Flächen und PNGs im IE6

Ich möchte hier das Problem von transparenten Flächen allgemein und transparenten PNGs im IE6 eläutern und Vorschläge für Lösungen aufzeigen.

Es gibt für fast Alles eine Lösung, diese aber zu finden, kann manchmal ein richtiger Krampf sein. Schauen wir uns doch einmal die Eigenschaft opacity an.

Um ein div transparent darzustellen kann man folgenden Code schreiben, um alle Browser zu unterstützen, einschliesslich IE6:

div.transparent{
    opacity:0.5;  /* CSS3 */
    -moz-opacity:0.5;  /* FF */
    -webkit-opacity:0.5;  /* Safari */
    filter:alpha(opacity=50);  /* IE */
}

Soweit so gut, möchte man jedoch Text in diesem div darstellen, stellt man schnell fest, dass die Transparenz vererbt wird und der Text ebenfalls durchscheint, was bei sehr geringen Transparenzen evtl. noch akzeptabel wäre aber für alles andere unbrauchbar wird.

Viele Web Producer greifen aus diesem Grund doch wieder auf die transparenten PNGs zurück. Leider sind diese sehr speicherfressend und eigentlich auch für die meisten Browser unnötig.

Hierfür eignet sich die Eigenschaft background und der Wert rgba, wie im folgenden Beispiel:

div.transparent{
    background:rgba(178,111,253,0.5);
}

Bei dem vierten Wert handelt es sich um den Alpha-Kanal.

Für transparente Flächen sollte man also auf PNGs verzichten, möchte an jedoch Icons mit transparenten Hintergrund darstellen, kommt man nicht um PNGs herum. Hierfür bietet Microsoft eine eigene Lösung und zwar die Eigenschaft "filter".

Der filter lässt sich folgendermaßen auf Hintergrundbilder anwenden:

div.transparent {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled=true, sizingMethod=scale src='transparent.png');
}

div.transparent[class] {
    background:url(transparent.png) left top no-repeat;
}

Diese Lösung stößt jedoch an Ihre Grenzen, sobald man die Hintergrundbilder z.B. speziell positionieren möchte. Es treten auch Probleme bei Verlinkungen auf, wenn man den filter auf ein absolut positioniertes div anwendet.
Zudem ist diese Lösung ebenfalls speicherfressend, deshalb empfehle ich hier eine eigene CSS Datei zu verwenden, die nur beim IE6 eingebunden wird.

Der Code würde dann folgendermaßen aussehen:

CSS Datei für alle anderen Browser

div.transparent {
    background:url(transparent.png) left top no-repeat;
}

CSS Datei für IE6

div.transparent {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled=true, sizingMethod=scale src='transparent.png');
    background:none;
}

Über den Autor

Katharina Kozlowska
Adobe Certified Expert in Advanced ColdFusion
Telefon +49 (0) 30 609 82321 13
E-Mail: katharina.kozlowska@pixeltex.com