Springe zum Inhalt, oder zum Menü.

Webdesign Haas

Individuelle Beratung
und Gestaltung für
Ihren Internetauftritt

Webdesign Haas
Marcus Haas
Buntentorsteinweg 96
28201 Bremen

Tel. 0421 / 387 13 60
Mobil: 0162 / 957 54 07
Web: www.webdesign-haas.de
E-Mail:

< CMS < Praxis < Tipps und Tricks < Transpante Bilder im IE6

Transpante Bilder im IE6

Fast alle aktuellen Browser unterstützen transparente Portable Networks Graphics (PNG), aber es gibt eine noch weit verbreitete Ausnahme: dem Internet Explorer 6.

Alle Bilder (und Elemente)

Vielleicht haben Sie aber schon gemerkt, dass trotzdem manche Webseiten auch unter IE6 transparente PNGs verwenden, dazu gibt es zwei Tricks, denn der IE ab Version 5 bringt ein paar proprietäre Filter mit, mit denen sich Transparenzen nutzen lassen.

Zunächst ist da der Alpha-Filter (als Style-Anweisung):

style="filter:Alpha(opacity=100,finishopacity=0startx=0,starty=0,finishx=0,finishy=90,style=1);"

Der Filter erwartet folgende Parameter:

Probleme macht dieser Filter, wenn Schriftzüge betroffen sind, denn die Transparenz wirkt sich nicht nur auf das Hintergrundbild aus und kann die Lesbarkeit erschweren.

PNGs mit Alphachannel

Der AlphaImageLoader lädt PNG-Bilder, bei denen Bereiche als Transparent, definiert sind, das funktioniert leider - wie alle diese Filter - nur bei eingeschaltetem Javascript. Hier der Filter als Stylesheet-Anweisung:

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

Nachdem die Grafik - hier als Hintergrund - eingebunden ist muss man IE erst mal beibringen, das er sie doch nicht laden soll, dazu dient die zweite Zeile, da kein anderer Browser "expressions" versteht dürft das keine Schwierigkeiten machen.

Eine andere Möglichkeit ist eine zusätzliche Anweisung, die IE (noch?) nicht interpretiert, wie in diesem Beispiel:

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

Der Filter erwartet folgende Parameter:

Probleme machen hier Links, denn der IE verhält sich etwas seltsam. Besteht die Grafik aus bis zu 2x2 Pixel scheint es zu funktionieren, bei größeren Bildern wird der Link zwar angezeigt ist aber nicht mehr anzuklicken (um sich zu behelfen könnte man aber den Hintergrund mit einem Mouseover-Effekt austauschen).

Seitenanfang