Opacity

[Patriarka]

Hola gente quiero hacer algo pero no se si es posible:

Código CSS:

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 
  /* IE 5-7 */
  filter: alpha(opacity=50);
 
  /* Netscape */
  -moz-opacity: 0.5;
 
  /* Safari 1.x */
  -khtml-opacity: 0.5;
 
  /* Good browsers */
  opacity: 0.5;
}
.texto_blanco{
color:white;
}
 

Código HTML:

<div class=" texto_blanco transparent_class" >larala</div>
 

Quiero que solo el fondo del div tenga el opacity y el texto se mantenta con el color original.

como podria hacer esto?
dentro de esta caja tambien hay imagenes, videos etc y queda todo con opacity

[Rafael]

El Opacity se hereda a todo el contenido, por lo que directamente no puedes.

Tienes 2 opciones. Poner un contenido por fuera (el texto) y moverlo con position absolute.

Digamos
<div class="Contenedor">
<div class="Fondo"></div>
<div>Texto</div>
</div>

O usar un png transparente de fondo.

P.D. Olvídate del Ie 5-7 y el código de netscape. También botaba el de Ie8 y el de safari.

[pzin]

Puedes usar también funciones de colores que tienen un canal de transparencia:

• hsla()
• rgba()

Por ejemplo:

Código CSS:

.transparent_class {
  background: rgba(100,40,20,.5);
}
 

[Patriarka]

hola si tuve que usar RGBA, por suerte era un fondo blanco con alpha

Gracias!