Cross-browser PNG background

Muitas vezes temos problemas para implementar transparência (PNG ou filtro de transparência) com sucesso em todos os browsers sem muita dor de cabeça. Reuni aqui uma forma que acredito seja eficaz porque está tudo no mesmo CSS e não precisa de JavaScript.

O CSS

#box {
    background-image: url(../img/boxBg.png) !important;
    background-image: none;
    filter: none !important;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='img/boxBg.png',sizingMethod='scale');
    position: static;
}

O HTM

<div id="box">
    <p>Conteúdo aqui</p>
</div>

Supondo que você trabalhe com a seguinte árvore de diretórios:

/css/box.css
/img/boxBg.png
/index.htm

Vamos analisar cada linha do CSS:

background-image: url(../img/boxBg.png) !important;
Define a imagem de fundo do elemtento, no caso o div, e o !important define que esta linha é a definição de background-image que vai prevalecer sobre todas as outras declarações desse atributo. Note que o Internet Explorer (IE) 6.0 e anteriores ignora o !important se tiver alguma declaração do mesmo atributo depois dessa linha.
O caminho da imagem quando você usa ela em um .css no background-image é relativo ao arquivo .css.
background-image: none;
Filtro para o IE 6.0 e anteriores. Como ele ignora o !important da linha acima ele não vai mostrar a imagem de fundo no elemento.
filter: none !important;
O, recém lançado, IE 7.0 já trabalha com o comportamento padrão do !important no CSS. Se não existir essa linha, ele vai renderizar dois PNG’s um sobre o outro, já que essa nova versão já tem suporte para PNG de 24bits.
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='img/boxBg.png',sizingMethod='scale');
Mais uma linha para IE 6.0. Ele vai ignorar o !important da linha anterior e vai usar o filtro para exibir o PNG com todos os níveis de transparência.
O caminho da imagem quando você usa ela em um .css no filter é relativo à página que você está chamando.
No filtro AlphaImageLoader você têm três opções para o atributo sizingMethod:

  • sizingMethod='image' – mantém a imagem do tamanho original, ele “estoura” o tamanho do elemento se a imagem for maior que ele
  • sizingMethod='scale' – redimensiona a imagem pra caber dentro do elemnto, distorcendo ela se for necessário
  • sizingMethod='crop' – corta a imagem do tamanho do elemento
position: static;
Quando o IE 6.0 aplica o filtro, ele renderiza todo o conteúdo e o elemtento fica “chapado” como se fosse uma imagem. Links (a), campos de formulário (input) e outros elementos, perdem o seu comportamento padrão e os eventos não funcionam para o elemento. Para resolver esse problema usamos position: static; que contorna essa falha de renderização. Se for necessário posicionar o elemento na tela vai ser necessário colocá-lo dentro de um container (div) e este elemento “pai” pode ter a posição absoluta ou relativa na tela.

Essa solução tem se mostrado ideal nos projetos que tenho trabalhod. Foi testado no Firefox 1.5, Internet Explorer 5.5; 6.0; 7.0 e Opera 9.0, todos rodando Windows XP. Fico agradecido se alguém conseguir testar em outros sistemas operacionais, pricipalmente Macintosh.

10 Comments »

  1. Daniel Racca said,

    December 18, 2006 @ 16:00

    Olá amigo, eu testei aqui e não funcionou..
    Se copio e colo o código no IE simplesmente não amostra fundo algum.
    Ou se apresento apenas o background e o filter, ele até aparece o fundo mas com aquele bom e velho verde-claro do IEca.
    Tem como você fazer um exemplo pra min?
    Desde já agradeço! Se sua técnica der certo, todos meus problemas acabaram!

  2. thiago freitas said,

    February 7, 2007 @ 13:58

    Olá!!! Mto obrigado pela ajuda!!! Quebrou uma árvore!!! Mas tenho um problema: mesmo utilizando o atributo “position:static” os links, botões e inputs ficam inacessíveis.

    Alguma sugestão?

  3. nuno neves said,

    September 11, 2007 @ 13:24

    boas! eu tambem testei e não consigo ter acesso aos elementos do div (mesmo com a técnica “position: static;”.

    Existe alguma outra técnica que se possa usar?

  4. Lucas Pedroza said,

    April 8, 2008 @ 00:29

    Funciona!!!!

    Ao contrário dos Crtls-Cs e Crtls-Vs, que comentaram o meu funcionou…amanhã vou testar no IE 7, se não funcionar vai tomar pedala…hahaha

    Abs

  5. Carlos Soler said,

    May 9, 2008 @ 16:07

    Funciona mesmo!

    Só podia ser uma dica do programador sensível!

    Abraço!

  6. André Campos said,

    December 11, 2008 @ 09:59

    Cara, funcionou perfeitamente seu código!

    Testado e aprovado no IE 6 ou inferior.

  7. Diário de um programador » PNG transparente no IE said,

    January 15, 2009 @ 11:19

    […] uma pesquisa me deparei com uma solução que funcionou da forma como eu precisava.  Está no blog do AMF Designer. Tomei a liberdade de transcrever a solução para fins de […]

  8. Marcio said,

    April 15, 2009 @ 05:56

    Isso tunta funfa mas os links e os textos da pagina não ficam acessiveis

  9. Jayvee said,

    September 9, 2011 @ 08:54

    I was so confused about what to buy, but this makes it undrestadnlabe.

  10. copic sketch markers cheap said,

    April 20, 2012 @ 20:20

    copic sketch markers cheap…

    […]while the sites we link to below are completely unrelated to ours, we think they are worth a read, so have a look[…]…

RSS feed for comments on this post · TrackBack URI

Leave a Comment