Como usar PNG transparente no Internet Explorer 6

Postado em 9 de agosto de 2008 em Aprenda NumClique

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

Joares Miranda

Webdesigner, twitteiro, blogueiro. Para alguns, um falso nerd, acho que por conta de não perder a chance de gastar horas num bom papo off-line

Ver todos os posts de Joares Miranda | Twitter: @joares

Comentários

Cayo Medeiros aka. yogodoshi
em 1 de outubro de 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!

Sidney
em 5 de março de 2009

Infelizmente essa solucao pra transparencia de PNGs no ie6 nao funcionou (ow lixo de navegador que é esse hein). Até agora não encontrei uma que funcionasse.
Mesmo assim valeu pela tentativa.

Abraço.

gadarf
em 3 de maio de 2009

Boa dica, vou ver se funciona.

Natanael
em 12 de junho de 2009

Eu uso javascritp também, vou deixar aqui o link de uma solução em javascript, quem se interessar: http://www.comocriarsites.com.br/Png-transparente-no-internet-explorer_b_1.html

Bom trabalho a todos

sergio ronei hentz
em 20 de novembro de 2009

Puxa vida, muito util.

Inserir comentário

Publicidade - Skybanner

Ícones para acesso às mídias sociais

Publicidade - Banner Quadrado

Publicidade - miniquadrados submarino

Blogs amigos

Patrocínio

Monitor online

Busca

Publicidade - Full Banner

Sobre este blog

O blog NumClique pode ser definido de várias maneira, seja por trazer um conteúdo diferenciado em relação aos assuntos ligados não só a tecnologia, bem como a tudo o que rola de interessante e que se refere à nossa grande paixão: A internet.

Quer saber quem faz este blog?

  • Joares

    CEO / Gerente de negócios

  • Antino

    CEO / Gerente de conteúdo

  • Pedro

    Produtor de conteúdo

NumClique – Estilo de vida digital

Política de privacidade

Todo material publicado neste blog e que tem como autor algum membro ou ex-membro da equipe é de propriedade do blog

Hospedado por Argohost.net - Especialista em Hospedagem de sites e blogs

Este blog utiliza WordPress como CMS