Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/08/2010, 01:20
kuei
 
Fecha de Ingreso: julio-2010
Mensajes: 7
Antigüedad: 13 años, 8 meses
Puntos: 1
Opacidad para elementos superpuestos

Hola,

Tengo una duda de novato con esto de la opacidad. El caso es el siguiente:

Cita:
<div id="cabecera">
<div id="logo">
<span id="logo_t">Mi texto</span>
<span id="logo_i"><img src="images/mi_imagen.png"/></span>
</div>
</div>
Y este sería el código CSS:

Cita:
#cabecera{
float:left;
position:relative;
filter:alpha(opacity=1);
-moz-opacity:.1;
opacity:.1;
background-image:url(../images/banner_sup.jpg);
margin-top:10px;
margin-left: 15%;
width: 70%;
}

#logo_t{
float:left;
font-size: 28px;
text-shadow: 8px 8px 8px #B5B5B5;
color: #F8FFFF;
margin-top:35px;
margin-left:20px;
position:relative;
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
}

#logo_i{
float:right;
padding: 5px 10px 5px 0px;
position:relative;
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
}
Bueno, pues lo que yo quiero es que la imagen de fondo de #cabecera tenga un poco de opacidad(transparencia), pero que dicha transparencia no afecte a los contenidos de los otros dos divs. He estado buscando y en principio debería funcionar. He probado también a superponer los divs en diferentes capas con z-index, pero en todos los casos no funciona como quiero. ¿Qué tengo mal? ¿No puedo dar opacidad a un elemento contenedor sin que afecte a otros elementos que estén dentro de él?

Muchas gracias de antemano por las respuestas.