Levei uma tremenda surra quando comecei a fazer um site, e tive que expotar as imagens em PNG, mas não era somente isso precisava realmente fazer com que a imagem ficasse transparente e com sombra, depois de uma vasta varrida no Pai dos Bur… rs, ou seja, o Google! Achei uma solução para meu problema, e resolvi compartilhar com todos na web.
primeiro faço o seguinte informo que só é válido abaixo de Internet Explorer 7, é necessário colocar entre a tag HEAD:
<!–[if lt IE 7]>
<link rel=”stylesheet” href=”png_fix.css” type=”text/css”>
<![endif]–>
depois coloco no caminho o seguinte arquivo: png_fix.css
/* pngfix */
.png,
img{
behavior: expression(
(
this.origBg = this.origBg?
this.origBg
:
this.currentStyle.backgroundImage.toString().replace(‘url(“‘,”).replace(‘”)’,”)
),
this.behaviorSet == undefined?
(
this.origBg.match(/.png$/) == null?
(this.nodeName == “IMG” && this.src.match(/.png$/))?
(
this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src='” + this.src + “‘, sizingMethod=’image’)”,
this.src = “imagens/transparente.gif”
)
:
null
:
this.origBg.match(/.png$/)?
(this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src='” + this.origBg + “‘, sizingMethod='” + ((this.currentStyle.backgroundRepeat == “no-repeat”)? “crop” : “scale”) + “‘)”,
this.style.background = ‘none’):null
)
:
null
,
this.style.behavior=’none’,
this.runtimeStyle.behavior=’none’,
this.behaviorSet = true
);
}
mas temos q tomar muito cuidado com o Firefox, pois ele funciona PNG com transparência normalmente, será necessário identificar o browser usado, e aplicar este fix somente quando o usuário estiver usando o Internet Explorer.
Infelizemente não consegui testar em todos os browser, seria legal quem tivesse vontade de compartilhar quais os browser que o PNG funciona normalmente, coloquem um POST indicando o Browser testado.
– Firefox (Funciona)
– Internet Explorer (NÃO Funciona) – Precisa do FIX