Jump to content


Photo

Boa Dica: Png Com Transparencia No Ie


  • Faça o login para participar
2 replies to this topic

#1 nick171

nick171

    <? if => erro ?>

  • Usuários
  • 612 posts
  • Sexo:Não informado

Posted 11/04/2007, 09:00

Aeee pessoal..

Estava pesquisando e como muita gente sabe o IE tem problemas para exibir PNGs com transparência!!!

O que acaba forçando a utilizar metodos mais trabalhosos, se matando arrumando uma gif pra não perder qualidade (isso quando fica bom) ou aumentando grosseiramente o código html inserindo flash com a sombra que você quer aonde você quer colocar o efeito de transparência.


Essa tecnica eu não sei em quantos IEs funcionam, só testei no 6, mas o IE 7 ja aceita PNG :D

Agora para de enrrolar e vamo pro código.


DEIXANDO TODAS AS PNG's (COM EXCESSÃO DOS BACKGROUNDS TRANSPARENTES)
Esse aqui é super facil,só você jogar um javascript no codigo da pagina que ele ja le normalmente.

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

<img src="IMAGEM.png" width="300" height="35">

java script: http://homepage.ntlw...osola/pngfix.js
fonte: http://homepage.ntlw...la/pnghowto.htm


BACKGROUNDS PNG'S COM TRANSPARENCIA (Ex: com class fundo)
Agora esse é para que vocês possam utilizar essas png's transparentes como background seja coom class, como id, diretamente na tag e etc.

<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]-->


Ta aeee... E o bom é que é facil de usar!!! e espero que seja útil pra muita gente =)
Flw

Edição feita por: nick171, 13/04/2007, 17:01.

Nícolas Vieira Rossett


"O maior segredo da vida é que a mesma não é um processo de descoberta, mas sim de criação.
Você não está se descobrindo, mas se recriando.
Por isso não tente descobrir quem você é, mas busque determinar... "Quem você quer ser"!!!

#2 alexanmtz

alexanmtz

    Turista

  • Usuários
  • 30 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte
  • Interesses:Photoshop, Flash, Dreamweaver, CSS, XML, Fireworks, PHP/SQL, games, música etc.

Posted 19/07/2007, 14:24

Existe um Plugin do Jquery que faz o serviço sem precisar inserir filtro e assim impedir a validação, funciona tanto para Background-image no css, quando para imagem inserida, dá uma olhada aqui:

http://khurshid.com/jquery/iepnghack/

Para isto, você precisa do Jquery:

www.jquery.com

Ele foi o mais acessível que consegui...

Espero ter ajudado...
Não são permitidas imagens com dimensões maiores que 350x20 pixels.

#3 KrZ

KrZ

    =)

  • Usuários
  • 259 posts
  • Sexo:Masculino
  • Localidade:Home

Posted 10/10/2007, 14:33

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.counterst....com/teste.html

desde ja agradeço
Nome: Rodrigo C. Santos
Blogs/Sites: www.rodrigokrz.com - www.logandoti.com




0 user(s) are reading this topic

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq