Průhledné obrázky PNG v IE6

Je známá věc, že Internet Explorer 6 a starší si neumí klasickým způsobem poradit s průhlednými obrázky ve formátu *.png. To může být ošemetný problém, pokud kódujete šablonu pro layout, kde si grafik rád ujížděl na non-box prvcích. Naštěstí se i toto dá řešit pomocí filtrů, které má (nejen) explorer v sobě. Výhodou je, že nepotřebujete žádné javascripty ani hacky, vše je naprosto transparentní.

Filter který se na to dá použít se jmenuje AlphaImageLoader a použití je následující:

V klasickém css souboru si prvek nastylujete obvyklým způsobem pro „normální“ prohlížeče:

#content{
width: 100%;
height: 17px;
background: url(img/bg_content.png) left top no-repeat;
}

A dále přidáte následující kód do stylu speciálně pro IE6:

#content{
background: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='img/bg_content.png', sizingMethod='scale');
}

Pokud soubor stylesheetu jen pro IE6 nemáte, stačí vytvořit nový a v hlavičce stránky ho přiřadit pomocí následujícího kódu:

<!--[if lte IE 6]>
<link href="style_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

A voilá, máte průhledné pozadí prvku i v IE6. Pokud Vám něco nefunguje nebo znáte lepší způsob, budu rád pokud se podělíte v komentářích.

Žádné příbuzné články.