14 de setembro de 2007

Background PNG Transparente para IE 6.0

Bom pessoal, depois de quebrar muito a cabeça com esse tal de PNG transparente para IE 6...
eu consegui resolver, e vou compartilhar aqui para que não precisem sofrer como eu hehehe.

Primeiramente você insere sua imagem de 'background' como uma outra qualquer.

>CODE <<>


<style media="screen,projection" type="text/css">
    #suaID{
      background: url(imagem.png);
    }
</style>




Agora vamos eliminar esse 'background para o IE', pois isso pode te dar problemas, e também vamos setar nossa fórmula mágica para a transparência no IE6

>CODE <<>


<!--[if lt IE 7]>
<style media="screen,projection" type="text/css">
    #suaID{
      background-image: none;
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/suaimg.png');
    }
</style>
<![endif]-->



(importante: o caminho para a imagem, é relativo à página aberta, não ao CSS)

Agora tem um problema que é horripilante.... mas também já tem a solução [pra quem não tem idéia do problema que isso da, eu vou explicar.. os LINKS SOMEM]

Para resolver o problema de 'não poder clicar' em algumas coisas (em links principalmente), é só colocar uma DIV interna, com ‘position: relative;’, resolvendo este impasse.

EX do código....


<style media="screen,projection" type="text/css">

/** SETA O FUNDO NORMALMENTE PARA IE7 E FX */
.fundo{
    float: left;
    width: 757px;
    background-image: url(img/conteudo.png);
    background-repeat: repeat;
    margin: -2px 0 0 0;
}

/** HACK PARA SEUS LINKS VOLTAREM A FUNCIONAR */
 #BugLink{
    position: relative;
}
</style>

<!--- HACK PARA LER APENAS NO IE6 --->
<!--[if lt IE 7]>
    <style media="screen,projection" type="text/css">
        .fundo{
            float: left;
            width: 757px;
            background-image: none;
         filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/conteudo.png');
        }
    </style>
<![endif]-->

<div class="fundo">
    <div id="BugLink"> Todo link aplicado aqui ou qualquer outro conteúdo vai continuar funcionando.!!! ;D </div>
</div>




Espero ter ajudado, até mais!

12 comentários:

Sil Camargo disse...

Não entendi nada o que vc colocou aqui...rsrsrsrsrsrsrsrs

Unknown disse...

hhuhuhuhuhuh!!!!!

Muito bom!

Já usei o macete do filtro mas nunca deu esse problema dos links até ontem.. rsrsrs

VALEU!!!

Tainã disse...

vaio num rolo num sei pq!!!..........

Roberto Tavares disse...

mas tem um pro grande, no meu caso pois eu tenho que colocar o div onde esta o png com display none, e depois setar display block, ai nao rola...
(tipo um slinbox pra mostar o conteudo)

Unknown disse...

Roberto,

bom vc esta tentando coloca ruma div por cima da png transp isso?

tenta fazer o seguinte, deixar essa div com position: absolute;

porque ai ela fica acima do png trans.
vc só vai ter q fazer uma condição talvez para o FF e o ie6 de margin

ex:.

#div1{
/*FF*/
margin: 20px 0px 0px 0px;
/* Hack para os IE \*/
* margin: 20px 0px 0px -100px;
/**/
}

isso aqui foi um exemplo!
espero ter ajudado
flws

uma mente pertubada disse...

Laio, eu coloquei a sua dica em um trabalho, funcionou ok, ate chegar ao lance dos links.. porque eu preciso que a div que tem o png transparent de background tenha tb position:relative, ou seja, o que tah acontecendo é que aí o truque de colocar uma div dentro (buglink) nao esta funcionando, porque a div que a contem tb tem position:relative.

e eu realmente preciso que essa div de fora tenha position.. sabe como acertar isso para que os links funcionem?

brigadao!
Adriana

Unknown disse...

Ola Adriana,

Bom se você não se importar você deixa seu bug link com
"position: absolute" ao invez de relativo.

porque você tem que pensar o seguinte
por padrão de css se você não setar nenhum position ele já é realitvo.

intão ficaria assim, sua png 'position: relative', e seu bug link com 'position: absolute'

ai você pode usar uma técnica pra deixar ajustado em abos os navegadores FF e IE(all version)

>CODE<
bugLink{
position: absolute;
margin: 12px 0px 0px 10px;
/* HACK PARA IE *\/
* margin: 12px 0px 0px -100px;
/**/
}

Qualquer coisa pode me add
no msn ou gtalk
laion.camargo@gmail.com < gtalk
laion@live.in < msn

Até mais Adriana
Espero ter ajudado!

Tiago Alves disse...

Funcionou certinho aqui.

Wesley Toddy disse...
Este comentário foi removido pelo autor.
Wesley Toddy disse...

Obrigado ao responsável pela dica, funciona corretamente.

Durante o dia todo estive quebrando a cabeça usando Javascripts e Hacks CSS para habilitar o canal Alpha das minhas imagens PNG no IE6.

A propriedade background recusava alguns scripts que usei para filtrar a transparência, onde só funcionavam na tag IMG.
Por algum motivo, os links eram sobrepostos pela imagem PNG e tornaram-se inacessíveis para clicar.

Através desta dica consegui fazer o que nem o meu amado Javascript conseguiu fazer...

Os links agora funcionam perfeitamente e o background pode receber um PNG com canal alpha [transparência] no maldito IE6.

Mais uma vez, obrigado!

[Wesley, Toddy]

Anônimo disse...

Bem... Quando eu quero usar transparencia em "alguma coisa" uso simplesmente:

opacity: 0.75;
filter: alpha(opacity=75);

A primeira declaração é para os "browsers modernos", e a segunda para o IE. Basta mudar os valores para mudar a opacidade (tipo, mais transparente ou menos transparente).

O problema da imagem transparente de fundo é que se você usar uma imagem com cantos arredondados... O IE6 "avacalha" com gosto!

Unknown disse...

Obrigado pela dica!

mas esse código que você postou aqui, deixa toda a imagem transparente! e no nosso caso ele esta retirando o fundo(BRANCO) das imagens ;)

Att... ;D