Archiv für die Kategorie ‘HTML/CSS’

PNG Transparenzverlauf im IE6

Samstag, 12. April 2008

Häufig werden bei modernen Webdesigns Transparenzverläufe (z.B. Schatten einer Box oder halbdurchsichtige boxen) eingesetzt. Beim slicen bzw. zerschneiden des Designs, um es in HTML-Form zu bringen, können sich dadurch Probleme ergeben.

Welches Format soll man nun wählen?
JPG eignet sich dafür nicht, da es in dem Format keine Transparenz gibt. GIF scheidet auch aus, da man nur eine Farbe als Transparenz festlegen kann, somit erhält man Ränder.
PNG wäre das einzige webfähige Format, um eine vernünftige Verlaufstransparenz umzusetzen. Der Internet Explorer 7 und Firefox stellen solche Grafiken normal da, leider zeigt der IE6 anstelle einer Transparenz ein grau an.

Und so funktioniert es per CSS-Definition, auch im IE6 die Transparenzverläufe anzuzeigen (Hintergrundbild):
#meinDivLayer
{
 background-image: url(images/bg_line.png);
 _background-image: none;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg_line.png', sizingMethod='scale');
}

Dieser Filter funktioniert natürlich auch mit img-Tags.

Vorteilhaft wäre auch, wenn man dies mit Conditions verbindet, dass beispielsweise eine eigener CSS-File für den IE6 geladen wird (im head des HTML-Files).
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="ie.css" />   
<![endif]-->

 

Weitere Informationen findet ihr hier:
http://christopherschmitt.com/2007/10/30/png-transparency-for-internet-explorer-ie6-and-beyond/