PNG transparente no Internet Explorer 6
Esses dias aprendi no trabalho uma coisa muito útil: fazer funcionar a transparência de imagens PNG no Internet Explorer 6. Vou mostrar aqui como fazer.
O PNG (Portable Network Graphics) é um formato aberto de imagens que veio na década de 90 para substituir o antigo GIF, que é um formato proprietário. Tanto o GIF quanto o PNG permitem criar imagens com pixels transparentes, ou seja, que permitem ver o que está ao fundo de onde a imagem é colocada. A diferença é que o PNG é muito mais avançado, permitindo usar uma gama muito maior de cores por imagem (o GIF suporta apenas palhetas de 256 cores) e compressão sem perda de qualidade.
Além disso, um dos principais atrativos do novo formato é que ele permite que as imagens tenham pixels com valor alpha (transparência). Esse controle permite criar áreas da imagem translúcidas ou degradês de transparência. Com isso é possível criar efeitos bem legais.
Aí vem a má notícia: o Internet Explorer, pesadelo dos desenvolvedores e designers de CSS, não reconhecia essa transparência. As áreas transparentes ou translúcidas ficavam cinza (que feio né?). A versão 7 do Internet Explorer já funciona corretamente com o PNG, mas como ainda tem muito IE 6 rodando por aí, lá vai uma solução para esses casos:
<HTML>
<HEAD>
<TITLE>Novo Documento</TITLE>
<style>
BODY
{
background-image: url(teste2.gif)
}
#divpng{
width: 420px;
height: 300px;
background-image: url(degrade1.png); /* Essa linha é para os browsers que entendem PNG direito */
_background-image: none; /* Essa é pra o IEca 6, pra ele não ler o PNG padrão */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='degrade1.png', sizingMethod='scale'); /* Essa coloca um filtro pra o IEca ler o PNG */
}
</style>
</HEAD>
<BODY>
<div id="divpng"></div>
Fica bonitinho, não? 
</BODY>
</HTML>
Segue o arquivo com algumas imagens de exemplo.
Só tem um problema: não adianta colocar links dentro da área onde esse efeito foi colocado, que eles não vão funcionar com IE6. A culpa não é minha… 
Outra coisa IMPORTANTE: diferente do background-image, no filter você deve colocar a url da imagem em relação à página HTML, e não ao arquivo CSS, caso contrário não irá funcionar.
Valeu a dica, Carol!
28 de Abril de 2008 @ 11:23:17
Cara, muito valiosa a sua dica, foi a unica que funcionou e a mais simples. Valeu!!!!!
30 de Junho de 2008 @ 21:10:21
Pois é. Estou tentando salvar o IE6 e descobrir uma forma de ligar os links, pq 20% da população ainda usa essa desgraça.
13 de Julho de 2008 @ 20:46:01
vc sabe me dizer pq a img não ficou na resolução normal e sim no tamanho da DIV?
14 de Julho de 2008 @ 00:48:53
Olá Diego, boa noite!
Tenta mudar a propriedade sizingMethod. De acordo com o manual da MSDN, essas são as opções:
crop - Corta a imagem pra caber no objeto.
image - Padrão. Aumenta ou reduz o objeto pra ficar do tamanho da imagem.
scale - Estica ou encolhe a imagem, para preencher todo o objeto até às bordas.
6 de Agosto de 2008 @ 11:06:29
Olá, quero agradecer este post.
Faz algum tempo que estava procurando corrigir isto no IE6 mas sempre achava “soluções” que usavam js só e como não manjo de javascript não tinha conseguido.
Este post resolveu minha vida.
muito obrigado
14 de Outubro de 2008 @ 22:22:16
Cara desde que voce nao precise usar o repeat no background rola na boa alguem tem alguma solução pra usar o repeat do CSS nesse background ae ?
Grato
Sidney
2 de Novembro de 2008 @ 12:54:45
cara, vlwwwwww
showww IE 6 quebra as pernas ^^
flww
7 de Novembro de 2008 @ 11:58:47
muito bom baralho vo até fazer uma festa caramba!!!!!!!!!!!