Como deixar png transparente no IE6

Olá gente, estou aqui hoje para solucionar um mistério! Muita gente insere png's com fundos transparentes em suas páginas, porém, no Internet Explorer 6, estas imagens são exibidas com um fundo cinza, ao invés da transparência esperada.

Então o Guilherme Medeiros me passou um link que ensinava a deixar as png's transparentes mesmo no IE6, trata-se de um tutorial em inglês, que muita gente não consegue entender, e confesso que eu mesmo tive uma certa dificuldade para realizá-lo.

Então entendam esse meu tutorial não como uma tradução, e sim uma adaptação do original, pois eu li, entendi, acrescentei algumas coisinhas a mais, e estou repassando esse conhecimento.

Vamos lá, antes de mais nada, observe o resultado desse tutorial. Observe que há duas imagens, uma está inserida pelo css(com o filtro que faz ficar transparente), e a outra está normal, com um elemento "img". Se você abre esta pagina no Firefox, por exemplo, as duas imagens aparecem normalmente, porque o firefox tem suporte ao png transparente sem a necessidade de filtros, ja abrindo no IE6 você vê que a imagem com o filtro está normal, já a imagem diretamente com o "img" está apresentando o fundo cinza. Vamos ver então como fazer isso.

O código é o seguinte:

<h1>PNG com o filtro:</h1>
<div id="imagem"></div>
<h1>PNG adicionada como imagem normal:</h1>
<img src="png.png" alt="Png normal" />

Vamos esplicar então, aquela div ali com o id #imagem é a div onde nós iremos aplicar o png com o filtro via css, então no caso, faça de conta que ela é uma "img especial" ^^

Após temos apenas a inserção da imagem diretamente com o elemento img, que no IE6 será apresentada com aquele fundo cinza.

Agora vou mostrar qual é o css que faz a mágica do png transparente:

div#imagem {
background:url(png.png) no-repeat center center;
_background:none!important;
width:250px;
height:250px;
position:relative;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='png.png',sizingMethod='scale');
}

Vamos entender este css, na primeira linha estou colocando o png de fundo na div, porém esse background naum deve ser exibido no IE6, esse background é só para os outros browsers, que exibem o png normalmente e não necessitam de filtro, é com o filtro que nós iremos inserir o png no IE6, por isso que logo após o background temos um _background(hack), que somente será interpretado pelo IE6.

As próximas 3 linhas são apenas definição de posição e dimensões, a última linha é a que mostra o png transparente no IE6, ela é que faz toda a mágica.

É isso pessoal, espero que não tenham ficado dúvidas, qualquer coisa me perguntem! Abraços