zum Inhalt oder zum Menü.

Webdesign Haas, Bremen

Individuelle Beratung
und Gestaltung für
Ihren Internetauftritt

Webdesign Haas
Marcus Haas
Sielwall 28


Tel. 0421 / 387 13 60
Mobil: 0162 / 95 75 407

Marcus Haas on Google+
Unsere Seite auf Google+

Transpante Bilder im IE6

Alle aktuellen Browser unterstützen transparente Portable Networks Graphics (PNG), aber nicht der veraltete Internet Explorer 6.

Alle Bilder (und Elemente)

Es gibt 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:

  • opacity = Deckkraft am Anfang (100 = keine Transparenz)
  • finishopacity = Deckkraft am Ende (0 = komplett Transparent)
  • style = Art des Verlaufs (0 = Addition von Vorder- und Hintergrund, 1 = linear, 2 = elliptisch, 3 = rechteckig ).
    Der Lineare Verlauf erwartet zusätzlich Koordinaten (in Pixel) für den Start und Endpunkt des Verlaufs, Obiges Beispiel entspricht einer Verlauf, der von oben nach unten an Transparenz zunimmt.

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ürfte 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:

  • enabled = true|false (Aktiv oder nicht)
  • sizingMethod = cropscale (Beschneiden, wie Bild oder Anpassen)
  • src = Pfad zum Bild

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).