Transparente PNGs im Internet Explorer
Wenn Sie schon einmal versucht haben transparente PNGs im Internet Explorer darzustellen, dann haben Sie sicherlich gemerkt, dass dieser aus schönen transparenten Farbverläufen und Schattierungen ein hässliges Grau macht. Das liegt daran, dass die Transparenz von PNGs noch nicht richtig im Internet Explorer implementiert ist. Doch es gibt eine Notlösung - einen von Microsoft bereitgestellten Filter, der wie im Folgenden angewandt wird:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Transparente PNGs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#image {
width:211px;
height:55px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( sizingMethod='scale');src='logo.png',
}
</style>
</head>
<body>
<div id="image"></div>
</body>
</html>
Die Grafik muss also in einen Container gepackt werden und mit einem von Microsoft bereitgestellten Filter gefüllt werden. Da man, falls ihr das schon versucht habt, nicht gleichzeitig ein background-image setzen kann, muss man für den IE ein Conditional Comment einfügen oder gleich von vorn herein per PHP-Code abfragen welcher Browser es ist. Ich bevorzuge den Conditional Comment als Browserweiche:
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 6]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
Jetzt könnt ihr in die style.css für den Container in der style.css die Grafik per background-image:url(...) und in der ie.css per background-image:none; filter:... einbinden und es wird in beiden Browsern laufen.
Der Firefox hat solche Probleme nicht. Unter anderem ein Grund umzusteigen.
Nachtrag:
Mit diversen Tools kann man seine PNGs auch tweaken, sodass diese ohne Javascripts/CSS-Hacks einwandfrei dargestellt
werden können. Hier gibts weitere Informationen zum PNG-Tweaking...
