Průhledné obrázky PNG v IE6

Publikováno 16. 7. 2009

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.

Tento článek byl přidán 16.7.2009 v 18:19 a patří do kategorie Webdesign. Reakce na článek můžete jednoduše sledovat pomocí RSS 2.0 kanálu. Můžete přidat komentář pokud chcete.

«
»

3 komentáře(ů):

  1. Červenec 21st, 2009 at 16:14
    Kulin Říká:

    Čaves ziki, tohle sem už taky párkrát musel řešit a nejlepší mi přišlo použít ten JS. De o to, že tenhle filtr PNG obrázky nepatrně zesvětluje a to je někdy v návrhu problém. Používám tento JS a funguje to v pohodě.

    http://www.dlnqnt.co.uk/index.php/tag/unitpngfixjs/

  2. Červenec 22nd, 2009 at 17:21
    ziki Říká:

    Dík za info, ono je to vždycky něco za něco, pokud je to javascript tak zas s vypnutým JS si nejspíš vprdeli ne ? (nezkoušel sem). Tady se mi líbí, že k tomu neni potřeba nic externího a zatim sem s tim problémy neměl, resp. že by zesvětloval sem si nevšim..

  3. Červenec 24th, 2009 at 21:03
    Kulin Říká:

    Nejspíš to asi nepůjde s vypnutým JS, ale co sem viděl weby, tak používali převážně JS. Ale sem tam i tenhle filter :-) . Těžko říct, co je nej. Asi to je tak, jak píšeš. Vždycky to je něco za něco. Bylo by fajn, kdyby už podíl IE6 klesl natolik, aby se takovýhle věci vůbec nemuseli řešit :-) .

Přidat komentář

 

webdesign Jan Zikmund