Opacidade

[bcs_ptx 0]

Ai pessoal, gostaria que só o fundo de minha div fique transparente e não todo o conteudo nela, ai quando eu coloco esses códigos para opacidade, tudo que tem na div fica transparante. tem como deixar só o fundo transparante?

 

opacity: 0.6;
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);

 

[Dian Carlos 29]

Use cores em RGBA para o fundo.

 

Por exemplo, background: rgba(0, 0, 0, 0.3) que é um fundo da cor preta com 30% de opacidade.

 

Obs.: Só funciona em navegadores com suporte a CSS3.

[Giovani 104]

@bcs_ptx, tens algumas opções pra esse "problema":

a - trabalhar com rgba;

b - trabalhar com um png transparente;

c - ou trabalhar com divs com position absolute, uma sobre a outra.

 

Eu, pessoalmente, acho a alternativa b mais prática e rápida ;)

 

 

-----

 

 

Pesquisando aqui no fórum achei essa resposta: http://forum.imasters.com.br/topic/463404-opacity/?p=1835995

[Henrique H 3]

Trabalhar com PNG não é a melhor maneira. Pois é a extenção que mais suporta cores, ou seja, acaba ficando um pouco pesada. O que você deveria fazer é usar rgba mesmo, já que a opacidade não funcionou.

 

Mas caso opte pela PNG recomendo o PNG Gauntlet, que tira todas as coisas desnecessárias que os programas editores colocam numa imagem, deixando-a bem mais leve.

[bcs_ptx 0]

Essa sobre o rgba nao conhecia, usei esta e achei melhor, testei nos meus 4 navegadores e deu certo, o problema são os mais antigos, que devem dar pau certo. mas valeu as dicas

[Giovani 104]

Trabalhar com PNG não é a melhor maneira. Pois é a extenção que mais suporta cores, ou seja, acaba ficando um pouco pesada.

 

Não vejo tanto peso numa imagem de 1px x 1px repetindo no eixo x e y ... mas ai fica a gosto do desenvolvedor ;)

[Henrique H 3]

Eu creio que com o rgba não vai dar problema com os navegadores antigos, pois o rgba tem vários suportes, mas não posso afirmar... Enfim, se eu ajudei da um ponto positivo clicando na flechinha verde, obrigado.

[Maykel-ctba 233]

RGBa também acho a melhor solução!

 

Segue tabela de suporte nos navegadores para análise! http://css-tricks.com/examples/RGBaSupport/

[andersonseifert 10]

Tem que tomar cuidado com as PNG pois quando se tratamos de Imagens muitos Icones ao rodar em servidor Local roda 100% quando hospedamos á muita diferente pois demoram mais para carregar.