[Resolvido] Div com transparência no Opera

[©JOÃO GABRIEL MARQUES 0]

E aí mestres do CSS...tudo certo? Comigo está tudo ok. O que não está ok é o meu CSS! rsrs

 

Seguinte: consegui fazer com que uma div (que está como background de um conteúdo) assumisse transparência, por meio de uma imagem png como "background url". Até aí, beleza. Só que o Ópera não entendeu que a imagem por si só já possui a transparência. Então, usei a propriedade "opacity" e defini o valor de "0.2", isto é, na mesma proporção da transparência da imagem. Meu problema é: no Ópera, o conteúdo que está sobre a div transparente também assumiu a opacidade de 0.2, o que não deveria acontecer, e com isso o conteúdo também ficou meio transparente. Alguém tem alguma idéia do que está ocorrendo e como posso solucionar isso?

 

Obrigado!!

[Andre Cocuroci 0]

Qual a versão do Opera. O meu é 9.63 e le png corretamente.

[Paulo de Tarso F. M. 24]

A propriedade opacity, e similares, controla a opacidade do elemento pai, ou seja, tudo que estiver dentro dele também receberá a opacidade definida. O mais estranho é o fato de o PNG não estar funcionando como deveria.

 

Não tem um link disso para nos passar? Ou pelo menos nos enviar a imagem com "problema"?

[©JOÃO GABRIEL MARQUES 0]

Olá...bom, não sei o que estava ocorrendo ontem, mas, testei agora após ler a resposta de vcs e funcionou...será que é porque tinha uma outra imagem no cache e por isso a imagem atual não tava sendo carregada pelo navegador? Obrigado pelas respostas!

 

» Obs.: a transparência só funcionou com o uso de imagem png no background...quando usei as propriedades filter (para o IE), -moz-opacity (para o Firefox) e opacity (para os demais navegadores) junto com um background-color, só não funcionou no IE, e no Firefox e Ópera o conteúdo também ficou transparente, ou seja, só com o uso do background-color eu não obtive sucesso na obtenção de transparência. Existe alguma(s) alternativa(s) de se obter transparência sem o uso de png? Só para vocês terem como ex, dêem uma olhada nos seguintes links, que são as folhas CSS do site www.novabrasilfm.com.br:

 

• CSS padrão para todos os navegadores: www.novabrasilfm.com.br/scripts/novabrfm01.css

 

• CSS para o IE 7: www.novabrasilfm.com.br/scripts/novabrfm01a.css

 

Na verdade, preciso de uma outra ajuda: o IE 6 não dá suporte à leitura de imagens png. O problema é que se eu inserir no próprio css da página um background-color e a propriedade filter (que seria a saída para que a transparência funcione no IE 6) colocando o * antes da propriedade, isso também vai ser lido pelo IE 7 e o background-color ficaria por cima do background-image, o que não pode acontecer. Como eu faço para "hackear" a transparência só pro IE 6?

 

 

Valeu!!

[William Bruno 1501]

Existe alguma(s) alternativa(s) de se obter transparência sem o uso de png?

Imagens GIF

Na verdade, preciso de uma outra ajuda: o IE 6 não dá suporte à leitura de imagens png.[..]Como eu faço para "hackear" a transparência só pro IE 6?

Veja:

http://forum.imasters.com.br/index.php?showtopic=325686

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

[Thiago Retondar 18]

Usando a solução que o William propôs, não precisa usar GIF. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[©JOÃO GABRIEL MARQUES 0]

Obrigado pela dica do javascript! Muito eficiente! Quando eu penso que estou começando a me considerar um webdesigner atualizado, aí é que eu vejo que não estou atualizado nada! rsrs

 

Só 1 coisa: tomando como exemplo os css's aí dos endereços que eu postei, para que serve o código css abaixo:

 

background-image:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/bg_menu_over01.png,sizingMethod="scale");

Sei que é algum filtro de png para o IE, mas tentei usá-lo e não vi nenhuma mudança na página...

[Thiago Retondar 18]

Esse filtro serve para fazer transparência no Internet Explorer. Mas tente assim:

 

background:url(imagem.png);
	 _background:none;
	 _filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imagem.png', sizingMethod='scale');

Abraços.

[©JOÃO GABRIEL MARQUES 0]

Valeu pela dica...só não entendi o underline...pra que serve?

[William Bruno 1501]

hack para somente o IE enchergar a propriedade. :lol:

Não sei nem se era "necessário", mas é pra isso.

[Thiago Retondar 18]

O underline é um hack só para o Internet Explorer 6 entender, já que o Internet Explorer 7 suporta PNG.

 

Qualquer dúvida volte a postar.

 

Abraços.

[©JOÃO GABRIEL MARQUES 0]

Aprendi mais uma! Nunca li nada na internet sobre o uso do underline para o ie6... Na verdade, preferi usar o javascript (DD_belatedPNG). Já baixei a biblioteca e li o post que o William recomendou. Só gostaria de 2 esclarecimentos sobre essa biblioteca:

 

1. Ela já foi testada? Funciona mesmo?

2. No post que o William recomendou, tinha um exemplo de uso da biblioteca, e nesse exemplo, o arquivo js (tag <script src> foi colocado antes do comentário condicional <!--[if lte IE 6]>. Se eu colocar o <script src...> dentro do <!--[if lte IE 6]> vai funcionar? Estou perguntando isso porque eu acho mais legal que o script seja "carregado" no head somente se o cliente estiver navegando por meio do ie6.

 

 

Abraços!

[Thiago Retondar 18]

1º - Sim, já foi testado. Sim, funciona pereitamente. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

2º - Sim, irá funcionar de ambos os modos. Mas o mais legal de se usar é dentro do <!--[if lte IE 6]>, pois assim os outro Internet Explorer não leem.

 

Abraços.