amf | blog

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.