Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Nícolas

BOA DICA: PNG com transparência no IE

Por , em Desenvolvimento frontend

Recommended Posts

Nícolas    4

Nícolas
Postado

E aeee pessoal.. seguinte.. hoje na net achei uma outra forma de usar como background....

 

A idéia é a mesma daquela usada la em cima...

 

<style type="text/css">

<!--

.fundo {

background-image: url(IMAGEM.png);

background-repeat: repeat-y;

 

width: 100%; /*IMPORTANTE PARA EXEBIR O BACKGROUND PRECISA ESTAR COM UMA LARGURA E/OU ALTURA DEFINIDA */

}

-->

</style>

 

<!--[if IE]>

<style>

.fundo{

background-image: none;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=IMAGEM.png,sizingMethod='scale');

}

</style>

<![endif]-->

Só que é muito mas simples e limpo.

 

Então esse código agora você substitui por esse.

 

 

<style type="text/css">

<!--

.fundo {

background-image: url(IMAGEM.png) !important;

background-image: none;

filter: none !important;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=IMAGEM.png,sizingMethod='scale');

}

-->

</style>

Lembrando que o valor scale você pode mudar de acordo com sua necessidade

http://msdn2.microsoft.com/en-us/library/ms532920.aspx

 

 

Mas voltando ao assunto...

 

Esse código não precisa utilizar hacks nem um estilo separado, apenas uma lógica muito bem sacada priorizando as tags importantes de cada navegador.

 

Como só o IE lê a filter e os outros navegadores não ele prioriza a filter para o IE, caso contrario ele le apenas o background image para os outros navegadores.

 

Muito mais simplificado acredito que vai facilitar pra muita gente.

 

Fonte: http://www.anieto2k.com/2006/08/28/png-int...uciones-varias/

 

Flw aeee

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

schumacker    0

schumacker
Postado

Pessoal, preciso da ajuda de vocês...Impementei o PNG como background, conforme exemplo que foi postado...

background-image: url(IMAGEM.png) !important;background-image: none;filter: none !important;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=IMAGEM.png,sizingMethod='scale');

Só tem um problema, o menu em Flash que fica por cima desse background, não executa! Só executa se eu remover o WMODE transparente dele. Mas não posso remover!! Preciso que o Flash seja transparente..Além disto, qualquer conteúdo que eu coloque por cima desse background, não fica ativo. (Links, forms..).Já tentei colocar o position:relative, porém não resolveu.Alguém tem sugestão??Para visualizar o site, clique aqui!OBS: No Firefox funciona 100%!!Me ajudem!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Krz    0

Krz
Postado

eu tentei fazer de todo jeito, mas sem resultado!

 

a questão é q uma coisa q me deixou curioso....

 

fiquei tentnado varias vezes e carregando a pagina no meu pc, ai pensei "vou upar e pedir um help no forum", fiz isso, ai carreguei a pagina, e... pra minha surpresa FUNCIONOU, pensei "uhuuuuuuuuuuu", ai dei um refresh e,,,,,, NAUM FUNFOU MAIS!!! sacanage, fiquei la apertando F5 q nem um louco, e NADA, detalhe q eu não mexi no html depois da vez que funcionou!!!

 

alguem pode dar uma olhada no meu código e me ajudar??? o.O

 

http://www.counterstrike.r7web.com/teste.html

 

desde ja agradeço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ricardo.RFS    0

Ricardo.RFS
Postado

schumaker não sei onde você colocou o relative, mas para funcionar link em cima deste PNG por exemplo é so fazer

 

a, form { position:relative }

 

no inicio do seu CSS que funcionará

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

eu tentei fazer de todo jeito, mas sem resultado!

 

a questão é q uma coisa q me deixou curioso....

 

fiquei tentnado varias vezes e carregando a pagina no meu pc, ai pensei "vou upar e pedir um help no forum", fiz isso, ai carreguei a pagina, e... pra minha surpresa FUNCIONOU, pensei "uhuuuuuuuuuuu", ai dei um refresh e,,,,,, NAUM FUNFOU MAIS!!! sacanage, fiquei la apertando F5 q nem um louco, e NADA, detalhe q eu não mexi no html depois da vez que funcionou!!!

 

alguem pode dar uma olhada no meu código e me ajudar??? o.O

 

http://www.counterstrike.r7web.com/teste.html

 

desde ja agradeço

Krz mal não tinha visto sua dúvida...

 

Antes de mais nada.... rammmrammm.......

....

...

 

 

Site de Half-Life 2... urruuu \o/

 

hehehe Caramba, esse jogo é F**A ja zerei varias vezes e num em canso dele ^^

 

Num sei se é teste ou site, mas se for com teste, ja começou testando bem, hehehe

 

 

Voltando a dúvida... hehehe

 

Cara se fez tudo certo, só exportou a PNG de forma errada... =)

 

Se exportou uma PNG8 com varias limitações pra deixar o arquivo menor...

 

Quando for exportar exporta com PNG32.... dessa forma a transparencia funcionou e o mesmo arquivo ainda ficou uns bytes mais leves...

 

Pode testa aee ;)

http://onix.hbserver.net/~vectorst/fundo_transparente.png

 

Flw aee ^_^

Compartilhar este post

Link para o post
Compartilhar em outros sites

Krz    0

Krz
Postado

bom, no momento, eu to fazeno um site só sobre CS, pq tow c pokissimo espaço no servidor, + assim q eu puder aumentar o espaço pretendo fazer um site sobre HL2 sim =Psobre a img, eu exportei como PNG 8 pq uso o Fireworks 8, e só tem opção pra exportar com alpha se for c png8, como png 24 ou 32 n tem :Se no PS na hora de exportar n mostra opção de se quer em png8 24 ou 32.... :Ssou meio noob em PS :Scomo você exportou essa img ???desde ja agradeço pela ae ae =Pvlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

Usei o Fireworks 8 e coloquei pra exportar somente como PNG32 (não tinha mais nenhuma configuração a definir) e exportei =]

 

Mas aee funcionou normal ae?? :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

jricardoss    0

jricardoss
Postado

Eu sei upar tópico antigo não é bom, mas tudo bem. Achei esse tópico pelo Google e sei que muitas pessoas vão acha-lo também, então resolvi postar uma solução "simples" para os elementos bloqueados dentro do div que terá o fundo transparente. A solução foi baseada nas informações já dadas neste tópico.

 

<style type="text/css">
<!--
.fundo {
background-image: url(imagens/fundo_cima.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=imagens/fundo_cima.png);
}
-->
</style>

<!--[if lt IE 7]>
<style type="text/css">
<!--
/*Aqui está a "solução". O asterisco faz com que todos os elementos dentro do div recebam o valor relative no atributo position */
.fundo * { 
position:relative;
}
-->
</style>
<![endif]-->

Postei só para evitar que mais pessoas batam a cabeça para resolver esse problema. Espero que ajude alguém, pois para mim resolveu. :P

Compartilhar este post

Link para o post
Compartilhar em outros sites

inforsis    1

inforsis
Postado

Boa Noite pessoal.

Utilizando a solução postada me veio na mente, e se eu quiser aplocar o efeito apenas em algumas imagens png?

 

Então , depois de umas pesquisas, vamos complementar a OTIMA informação que o nick postou:

 

DEIXANDO UMA(S) PNG(S) TRANSPARENTE (COM EXCESSÃO DOS BACKGROUNDS)

 

<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

<img src="IMAGEM.png" width="300" height="35" onload="fixPNG(this)">
java script:

 

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

function fixPNG(myImage) 
{
	if ((version >= 5.5) && (version < 7) && (document.body.filters)) 
	{
	   var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""
	   var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""
	   var imgTitle = (myImage.title) ? 
					 "title='" + myImage.title  + "' " : "title='" + myImage.alt + "' "
	   var imgStyle = "display:inline-block;" + myImage.style.cssText
	   var strNewHTML = "<span " + imgID + imgClass + imgTitle
				  + " style=\"" + "width:" + myImage.width 
				  + "px; height:" + myImage.height 
				  + "px;" + imgStyle + ";"
				  + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
				  + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>"
	   myImage.outerHTML = strNewHTML	  
	}
}

fonte: http://homepage.ntlworld.com/bobosola/pnghowto.htm

 

A fonte é a mesma que o nick postou. ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leandro Senni    1

Leandro Senni
Postado

PNG tranpsrente eu usei num SITE aqui... mais no 6 fico como JPG e ainda fico quase branco o parte transparente...

 

smente no EXPLORER 6... to agora mudando e como os desenvolvedores... estalei o MOZILLA e IE 6 e 7 ...

 

mo ruim mais ta valendo...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

Depende da forma que você exporta a PNG, uma vez um cara flw que o dele não fucionava e ele exportava no Photoshop

 

Até que falei pra ele tentar no fireworks e funcionou, agora só não sei que opção tava habilitada para atrapalhar =]

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

nick171 se eu não me engano o problema no PHOTOSHOP é por causa do ENTRELAÇADO não sei ao certo como

funciona, mas pode ser umas das causas.

Ou talvez ele tive-se esquecido alguma camada

 

falow

Compartilhar este post

Link para o post
Compartilhar em outros sites

edufino    0

edufino
Postado

Iai Pessoal!

 

primeiramente gostaria de parabenizar e agradecer a todos que colocaram códigos aqui no fórum...

 

 

bom, implementei o PNGFIX.JS aqui no meu sistema, mas ele anulou os links (do mesmo jeito que aconteceu com outros ai)...

 

Como um cara ai falou, o JAVA entra em loop e cancela os demais javascripts da página...

no meu sistema fica assim os links:

<img onClick="java script: ReloadUrl('LINK')" src="jpg/menu/IMAGEM.PNG" style="border-width:0px;" />

sem o onClick eu me %#¨@*

 

gostaria de saber se alguem conseguiu de algum jeito arrumar isso? SEM ter que adicionar um .Class pra todas as PNG's e tal?

 

não posso ficar usando o CSS primeiro porque vai aumentar o tamanho e segundo porque ele é bem dinâmico e grande, vai dar um trabalho gigantesco!

 

 

agradeço a atenção

 

 

abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Achei essa ótima dica tb:

http://www.monocromatic.net/blog/web/png-t...-e-backgrounds/

 

Só precisei alterar algumas linhas do HTC, mas foi para se adaptar melhor à minha situação.

Compartilhar este post

Link para o post
Compartilhar em outros sites

anselmogomes    0

anselmogomes
Postado

Cara, vlw. Muito bom, realmente funciona. O designer da empresa em q trabalho desenvolve layouts com transparencia e itens sobrepostos e nos penamos com o IE6.

Compartilhar este post

Link para o post
Compartilhar em outros sites

luiscarlos5046    3

luiscarlos5046
Postado

Boa Noite pessoal.

Utilizando a solução postada me veio na mente, e se eu quiser aplocar o efeito apenas em algumas imagens png?

 

Então , depois de umas pesquisas, vamos complementar a OTIMA informação que o nick postou:

 

DEIXANDO UMA(S) PNG(S) TRANSPARENTE (COM EXCESSÃO DOS BACKGROUNDS)

 

<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

<img src="IMAGEM.png" width="300" height="35" onload="fixPNG(this)">
java script:

 

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

function fixPNG(myImage) 
{
	if ((version >= 5.5) && (version < 7) && (document.body.filters)) 
	{
	   var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""
	   var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""
	   var imgTitle = (myImage.title) ? 
					 "title='" + myImage.title  + "' " : "title='" + myImage.alt + "' "
	   var imgStyle = "display:inline-block;" + myImage.style.cssText
	   var strNewHTML = "<span " + imgID + imgClass + imgTitle
				  + " style=\"" + "width:" + myImage.width 
				  + "px; height:" + myImage.height 
				  + "px;" + imgStyle + ";"
				  + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
				  + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>"
	   myImage.outerHTML = strNewHTML	  
	}
}

fonte: http://homepage.ntlworld.com/bobosola/pnghowto.htm

 

A fonte é a mesma que o nick postou. ;)

* Só complementando essa dica que foi uma das melhores e que funcionou em ambos FF e IE 6 mesmo qdo queremos colocar link nessas imagens...

Note que se colocarmos links nas imagens PNG com esse script, o link funciona mas não aparece a mãozinha do mouse qdo colocamos o mouse sobre a imagem com link... então coloquei uma pequena notação q funcionou corretamente..

Só adicionar nas CSS essa pequena linha:

a, form {
	cursor: Hand;
	}

Ai o código no nosso amigo INFORSIS tá completo..

 

Muito Obrigado inforsis! Vai ser de muita utilidade.

 

Luis Carlos

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito