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:
Não entendi nada o que vc colocou aqui...rsrsrsrsrsrsrsrs
hhuhuhuhuhuh!!!!!
Muito bom!
Já usei o macete do filtro mas nunca deu esse problema dos links até ontem.. rsrsrs
VALEU!!!
vaio num rolo num sei pq!!!..........
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)
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
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
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!
Funcionou certinho aqui.
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]
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!
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
Postar um comentário