Opacidad para elementos superpuestos

[kuei]

Hola,

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

<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:

#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.

[kuei]

Pues me voy a responder yo mismo porque le he seguido dando vueltas y he encontrado una solución (posiblemente un poco chapucera) que funciona tanto en Firefox como en Chrome.

Lo que he hecho ha sido añadir un <div> adicional y posicionarlo con position:absolute; justo encima del div #cabecera y con un z-index inferior.

Mi única duda, es si en distintas resoluciones (por ejemplo un portátil) se verá bien o se descuadrará el div colocado con position:absolute

¿Qué os parece la solución?