Como usar PNG transparente no Internet Explorer 6
Postado em 9 ago 2008 por Joares Miranda
Para você, desenvolvedor web, que sempre que termina um layout, lamenta porque não poderá utilizar aquele png transparente tão bonito e caprichado em seu site e você o substitui por um gif para que o resultado fique ao menor próximo do esperado… relaxe… a dica de hoje irá te ajudar a contornar essa burrice do Internet Explorer 6 (IEca 6)…
Para utilizar o png transparente no IEca 6, você terá que fazer um comentário condicional para o IEca 6 da seguinte maneira…
<!–[if IE 6]>
<style type=”text/css”>
</style>
<![endif]–>
Logo após ajustar o comentário condicional no topo do seu site, você irá fazer a simulação do Filtro Alpha para o IEca da seguinte maneira…
<!–[if IE 6]>
<style type=”text/css”>
#seletor {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”SuaImagem.png”, sizingMethod=scale);
}
</style>
<![endif]–>
Fazendo isso, sempre que você precisar utilizar um png transparente em um layout, não precisará mais fazer um gif transparente para substituir a imagem…
[NOTA]
- O motivo do Internet Explorer 6 não aceitar a transparência dos arquivos .png é por conta da ausência do suporte ao Filtro Alpha…
- Para saber mais sobre Comentários condicinais, clique aqui
Comentários
Cayo Medeiros aka. yogodoshi
em 1 out 2008
Cara, ter que colocar um código desses pra cada imagem PNG com fundo transparente que você tiver não é mole não…
Mas a dica é boa, apesar deu ainda preferir, no meu atual caso, usar o javascript pra isso.
Abração!