login

IE 5.5 und IE 6.0 zeigen Png-Bilder mit Alpha-Transparenz sauber an, wenn man folgenden Code benutzt:

 

z.B.

<div style="position:relative; height:65px; width:210px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='fileadmin/image/logo.png', sizingMethod='scale');">

</div>

in Mozilla (FireFox, Netscape), Opera werden PNGs mit α-Transparenz in jeder verwendung sauber angezeigt.

 

Damit keine große Fallunterscheidung bzgl. des Browsers gemacht werden muss wird das PNG als Hintergrundbild eingebunden [1], weil die für den IE notwendigen Filter [3] wie ein Hintergrundbild funktionieren. Damit das PNG beim IE nicht als Hintergrundbild angezeigt wird (dabei würde keine α-Transparenz angezeigt und es läge vor dem Filter-Bild) muss für den IE das Hintergrundbild entfernt werden [2]. Dies wird durch den Seiteneffekt erreicht, dass FireFox Zeilen im CSS, die mit // anfangen ignoriert (nicht W3C-konform!).

 

 

CSS:

.png_img {

    position:relative;

    width:210px;

    height:65px;

    background-image:url(fileadmin/image/logo.png); /* [1] */

    // background-image:url(); /* [2] */

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='fileadmin/image/logo.png', sizingMethod='scale'); /* [3] */

}

 

HTML:

<div class="png_img">

  <img src="clear.gif" height="210" width="65" alt="Logo">

</div>