Jump to content

Archived

This topic is now archived and is closed to further replies.

_ nEoN _

Cansado do Bug do PNG no IE ?

Recommended Posts

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.

Share this post


Link to post
Share on other sites

Nossa estava precisando de um script desses. :)/>

eu tbm, cansei de fazer trocentos fundos de tabela pra ficar igual o fundo do site. ^_^/>

Share this post


Link to post
Share on other sites

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"><html xmlns="http://www.w3.org/1999/xhtml"><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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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+ !

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Pessoal, alguém poderia me dizer qual a diferença entre usar gif ou png?

Share this post


Link to post
Share on other sites

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+

Share this post


Link to post
Share on other sites

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.