Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Tava de conversa com um amigo meu no msn, quando ele me fala que descobriu como tirar o bug no PNG transparente no IE. Faça um teste você mesmo, crie um PNG transparente e coloque em uma página. Rode no IE e veja o que acontece, provavelmente ele não mostrará ele como um PNG transparente, colocará um fundo meio verde-claro.
Bom, vejamos como tirar isso de uma ves por todas.
<style type="text/css"> / Alpha PNG support for IE ------------------------------ Aviso, este código abaixo funciona apenas para visualização na tela. Quando este documento for impresso, o bug voltará. O Hack Abaixo faz o código rodar apenas no IE. Sendo que os outros browsers como, Firefox, Opera e Safari já tem a transparencia de PNG nativo. \/ * html img/**/ { filter:expression( this.alphaxLoaded ? "" : ( this.src.substr(this.src.length-4)==".png" ? ( (!this.complete) ? "" : this.runtimeStyle.filter= ("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.src+"')")+ (this.onbeforeprint="this.runtimeStyle.filter='';this.src='"+this.src+"'").substr(0,0)+ String(this.alphaxLoaded=true).substr(0,0)+ (this.src="blank.png").substr(0,0) ) : this.runtimeStyle.filter="" ) ); } html, body { color:#000; background:#333333; }</style>
Certifique-se de criar uma imagem transparente com o nome blank.png e coloque na mesma pasta no seu CSS, logo após insira o CSS acima em sua Folha de Estilos. Agora rode a mesma página e veja o resultado.
Dica, sabe quando você faz akeles gif transparent pra ficar como borda do seu site, e sempre fica umas parte com erro, agora com o pNG fica mto mais facil. ;)/>
Flw ae, qualquer dúvida estamos ae.
NeoN
Obs.: O DeviantArt usa isso no seu sistema de 404, o código acima foi adaptado.
Nossa estava precisando de um script desses. :)/>
eu tbm, cansei de fazer trocentos fundos de tabela pra ficar igual o fundo do site. ^_^/>
>
Tava de conversa com um amigo meu no msn, quando ele me fala que descobriu como tirar o bug no PNG transparente no IE. Faça um teste você mesmo, crie um PNG transparente e coloque em uma página. Rode no IE e veja o que acontece, provavelmente ele não mostrará ele como um PNG transparente, colocará um fundo meio verde-claro.Bom, vejamos como tirar isso de uma ves por todas.
<style type="text/css"> /* Alpha PNG support for IE ------------------------------ Aviso, este código abaixo funciona apenas para visualização na tela. Quando este documento for impresso, o bug voltará. O Hack Abaixo faz o código rodar apenas no IE. Sendo que os outros browsers como, Firefox, Opera e Safari já tem a transparencia de PNG nativo. \*/ * html img/**/ { filter:expression( this.alphaxLoaded ? "" : ( this.src.substr(this.src.length-4)==".png" ? ( (!this.complete) ? "" : this.runtimeStyle.filter= ("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.src+"')")+ (this.onbeforeprint="this.runtimeStyle.filter='';this.src='"+this.src+"'").substr(0,0)+ String(this.alphaxLoaded=true).substr(0,0)+ (this.src="blank.png").substr(0,0) ) : this.runtimeStyle.filter="" ) ); } html, body { color:#000; background:#333333; }</style>Certifique-se de criar uma imagem transparente com o nome blank.png e coloque na mesma pasta no seu CSS, logo após insira o CSS acima em sua Folha de Estilos. Agora rode a mesma página e veja o resultado. Dica, sabe quando você faz akeles gif transparent pra ficar como borda do seu site, e sempre fica umas parte com erro, agora com o pNG fica mto mais facil. ;)/> Flw ae, qualquer dúvida estamos ae.NeoNObs.: O DeviantArt usa isso no seu sistema de 404, o código acima foi adaptado.
Poxa comigo não funcionou
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22)<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml%22)<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>PNG Alpha</title><style type="text/css">/*Alpha PNG support for IE------------------------------Aviso, este código abaixo funciona apenas para visualização na tela. Quando este documento for impresso, o bug voltará.O Hack Abaixo faz o código rodar apenas no IE. Sendo que os outros browsers como, Firefox, Opera e Safari já tem a transparencia de PNG nativo.\*/* html img/**/ { filter:expression( this.alphaxLoaded ? "" : ( this.src.substr(this.src.length-4)==".png" ? ( (!this.complete) ? "" : this.runtimeStyle.filter= ("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.src+"')")+ (this.onbeforeprint="this.runtimeStyle.filter='';this.src='"+this.src+"'").substr(0,0)+ String(this.alphaxLoaded=true).substr(0,0)+ (this.src="blank.png").substr(0,0) ) : this.runtimeStyle.filter="" ) );}html, body { color:#000; background:#333333;}</style></head><body><img src="blank.png" width="400" height="400" /></body></html>Vou testar em casa, poxa se funcionar vai ser uma mão na roda...valeu kara...abraços e bom fim de semana a todos...Marcio
Leandro, a imagem <img src="blank.png" width="400" height="400" />deve ser uma imagem de 1x1 pixels, com fundo transparente.você pode colocar qualquer outra imagem PNG que ele fará a substituição !pode ver que no codigo css ela esta declarada, e naun deve ser usada no documento. !Tente novamente, criando essa imagenzinha 1x1 transparent ! e colocando qualquer outra imagem na pagina com fundo transparente tbm !... te+ !
Cara, isso vai me ajudar demais....valew mesmo...
O único problema é que ele apenas funciona com as imagens na página.... não em imagens de background.Lex a gente podia estudar esse código ae pra tentar especificar esse "alpha" em imagens de background.. o que você acha ?neoN
esse exemplo deverá interessar vocÊs:
http://www.alistapart.com/articles/pngopacity
como demonstrado no link acima, é muito mais simples utilizar simplesmente:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgs/centerbg.png',sizingMethod='scale');
Pessoal alguémjá sabe se existe saída para imagens em BACKGROUND???Abraços!
>
Pessoal alguémjá sabe se existe saída para imagens em BACKGROUND???
Abraços!
[](/topic/119980-cansado-do-bug-do-png-no-ie/?do=findComment&comment=346166)
tem sim cara... http://www.alistapart.com/articles/pngopacity/
enjoy !
Pessoal eu estou com um problema, minha imagem de fundo é png, e eu presciso acrescentar uma moutra imagem mpng em cima dela, dependendo do resultado de uns testes, acontece que eu não consigo, fazer com que a imagem que eu coloco sobre o outro ficar transparente.Eu fiz assim, a imagem que eu colocar em cima do outro png, eu coloquei fundo verde, e ai no meu codigo php eu defino que onde tiver a cor verde esta parte da imagem ficará transparente, mas não funciona.Agora com se eu colocar a imagem de funco como png, e a imagem que vou colocar por cima como jpeg funciona, mas acontece que as duas imagens tem que ser png, alguem sabe o que acontece??Valeu
Pessoal, alguém poderia me dizer qual a diferença entre usar gif ou png?
tbm queria saber pq vcs usam png?não fica extremamente mais pesado? =/
canal alpha
>
canal alpha
[](/topic/119980-cansado-do-bug-do-png-no-ie/?do=findComment&comment=353935)
?????????????????? :wacko:/> http://forum.imasters.com.br/public/style_emoticons/default/cry.gif/>
as imagens gif tem transparencia, porem essa transparencia é de apenas uma cor... funciona bem quando se trabalha com gráficos no estilo "pixel art" pois se define uma cor de fundo, e essa sera substituida pela transparencia... lembrando que toda imagem que terá como meio a tela do computador sai em RGB (Red Green Blue).porem as imagens PNG levam o RGB + Alpha... bom isso significa que independente de cor, as imagens PNG não se utilizam de cor de substituição, e sim de um canal especifico para gerar a transparencia...faça o teste você mesmo, crie uma imagem transparent no photoshop ou similares e mostre ela no mozilla de preferencia... você vai ver o que acontece, quer ir mais além ? utilize gradiente transparent e veja o resultado...te+
hmmmnão fiz o teste, mas entendi sim..valeu! ;)/>
OK, obrigado pela explicação _nEoN_! Vou dar uma testadinha nisso aqui.
Valeu! http://forum.imasters.com.br/public/style_emoticons/default/worshippy.gif/>
resumindo a explicação...jah imaginaram um jpg com fundo transparente? o PNG eh isso e mto mais... ele possui mais qualidade, cores q um jpg e ainda com transparencia... ;)/> o q pesa mesmo eh o peso... mas com codigos em tableless, o tamanho do site diminui, fazendo com q você possa abusar um poko no tamanho das imagens... mas nem tanto neh... ;)/>
Lembrando algo importante, mas geralmente esquecido... PNG é uma especificação livre, diferente do JPG e do GIF.
Outra informação que deve ser levada em consideração, estes recursos apenas são possíveis apartir da versão 5.5 do Internet Explorer.
Existem outras soluções equivalentes, usando JavaScript, a solução apresentada é a unica funcional somente com código CSS.
Eu ainda não entendi como se faz o background transparente com PNG...Eu queria deixar o background de uma tabela com um PNG...Alguém tem um exemplo?Valeu..
deu uma olhada nesse post, na primeira pagina?
Claro neh meo..tipow eu tentei de TUDOOOOOOOOO... as imagens com png transparente eu consegui de boa... o problema foi os backgrouds com png transparente...
em background não funciona com esse script, tem que usar um outro recurso, que não me recordo agora, mais tem como SIM !
Nossa estava precisando de um script desses. :)/>