Transparencia no CSS

[DCL Design 0]

Olá,

eu to com um probleminha que não consigo resolver, deixa eu explicar pra ver se voces entendem:

 

to fazendo um site com um imagem no bg do body, e no conteudo eu to colocando uma div com bg BRANCO e transparencia de 65% pra que o bg da div possa aparecer partes da imagem do bg do body. Mas eu quero que o conteúdo dessa div, de alguma maneira fique normal, tipo o texto, e as imagens fiquem sem a transparencia.

 

O fundo eu consigo deixar transparente mas nao consigo deixar o conteudo NORMAL, ou seja, sem transparencia.

 

código:

#conteudo .direita {
        width:380px;
        clear:both;
	background: #ffffff;
	opacity:0.65;
	-moz-opacity: 0.65;
	filter: alpha(opacity=65);
	}

se alguem conseguir me ajudar eu agradeço muito!

porém, obrigado desde ja! :)

[Thiago Retondar 18]

Se você aplicar opacity em algum elemento com filho, a mesma é aplicada à eles.

 

Faça com GIFPNG Transparent.

 

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

[Gui.BAR 0]

Thiago, GIFs não dão efeito de opacidade e sim de transparência como você mesmo disse.

O único formato de imagem que consegue ter opacidade definida é o PNG (PNG é f***!), mas aí você eliminaria o IE6 da história. :D

[Dudao 0]

Quando você jogou transparencia na div #conteudo, automaticamente tudo o que estiver dentro da sua div ficara transparent!

 

você pode usar um PNG com transparencia na sua div #conteudo... veja:

 

http://forum.imasters.com.br/index.php?/topic/223512-boa-dica-png-com-transparencia-no-ie/page__p__991488__hl__PNG%20transparente__fromsearch__1entry991488

 

 

Ou criar 2 div´s

 

Uma com o BG transparent, outra você possisiona por cima desta div e joga seu conteudo!!!

[Guilherme Rambo 4]

Realmente a solução seria PNG ou então posicionar outra div "voando" encima da que é translúcida, a opção mais fácil é com PNG, o que elimina o IE6 da jogada, no entanto a outra apesar de ter um pouco mais de dificuldade e sujar um pouco o código é mais crossbrowser.

 

[]'s

[Alexandre.live 0]

Eu usaria um PNG com a tranparencia a desejada, com dimensões de 1px por 1px, e colocaria no CSS um Background com esse PNG sendo repetida no eixo x e no eixo Y, tipo:

 

#conteudo .direita{
                   width:380px;
                   clear: both;
                   background: url(imagem.png) repeat;
                   }

 

mas ai você teria que usar um hack para rodar no IE6, te recomendo o DD_belatedPNG_0.0.7a , que é bem fácil de usar, é so colocar no seu HTMl o seguinte:

 

  
  <!--[if IE 6]>  
      <script type="text/javascript" src="DD_belatedPNG_0.0.7a.js"></script><!--Local onde está o hack!--> 
      <script type="text/javascript">  
           DD_belatedPNG.fix(".direita");<!--Nome da class ou div q você vai aplicar!--> 
      </script>  
   <![endif]-->

O problema é que seu código pode não validar depois....Acho que isso ai funciona, testa ai e me retorna T+

[Gui.BAR 0]

Nossa.. lembrei do rgba!

Como niguém pensou nisso? http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

Mas, mais uma vez, o IE6 sai da jogada. Eu nao ligaria pra isso, já que a unica diferença seria a opacidade.

Você pode declarar as duas assim:

background: rgb(0, 0, 0); /* cor 'reserva' */
background: rgba(0, 0, 0, 0.7); /* onde '0.7' é a opacidade (alpha) */