Transparente PNGs für den Internet Explorer 6
Mittwoch, 27. August 2008
Auf der Suche nach einem Workaround für die Darstellung von transparenten PNG-Grafiken im Internet Explorer 6 findet man ja mittlerweile zig Webseiten im Netz. Hier möchte ich die bei mir wunderbar funktionierende Lösung präsentieren.
In erster Linie wollte ich kein JavaScript anwenden, weshalb schon viele Lösungen weggefallen sind. Eine Möglichkeit per CSS besteht in der Nutzung von Microsoft’s AlphaImageLoader-Filter, der durch DirectX bereitgestellt wird. Zu beachten ist, dass man den Code nur auf das background-Element im CSS beziehen kann. img-Tags werden davon nicht angesprochen. Per Conditional Comment wird der entsprechende CSS-Code speziell dem IE6 zugewiesen.
Wichtig bei der Filter-Angabe ist, dass man keine Leerzeichen verwendet. In einigen Anleitungen sind diese leider vorhanden und das Copy&Paste funktioniert dann natürlich nicht. Auch die Pfadangabe zu den Bildern unterscheidet sich zwischen dem Filter und dem background-Element im CSS.
<style type="text/css">
div#logo {
background-image: url(../images/logo.png);
}
</style>
<!--[if lte IE 6]>
<style type="text/css"><!
div#logo {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='image');
background: none;
}
</style>
<!--[endif]-->
Der Filter bietet unterschiedliche Möglichkeiten, das Bild zu skalieren. Über die Werte crop, image bzw. scale, die dem Element sizingMethod zugewiesen werden können, kann man das Bild auf folgende Weise skalieren:
- crop - Container und Bild behalten die angegebene Originalgröße
- image - Container wird auf die Bildgröße skaliert und enthaltener Text wird abgeschnitten (entspricht overflow:hidden) (Default-Wert)
- scale - Bild wird auf die Containergröße skaliert
Update: Auch img-Tags können per Inline-Styles transparent gemacht werden. Hierbei wird dann das src-Element überschrieben.
<img src="../images/logo.png" style="width: 200px; height: 80px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='image');" />
Und hier noch zwei Links mit ähnlicher Beschreibung/Anleitung. Einmal WebmasterPro.de und .devSOURCE.
