CSS - Problemas capas transparencia : opacity

Hola a tod@s,

estoy haciendo una pagina web que tiene dos áreas-contenedores: un área (outer-frame), que a su vez contiene en su interior otro área (inner-frame). Dentro del area inner-frame tengo una serie de contenidos con imágenes y texto. Además, como fondo he definido una foto que se repite (repeat). Para suavizar los contornos de las dos áreas externas, les he aplicado la propiedad opacity y -moz-opacity para darle algo de transparencia.
Pues bien, mi problema es el siguiente: si bien quiero que las áreas-contenedoras tengan algo de transparencia, no quiero en absoluto que los contenidos (texto, etc.) sean transparentes. Para las áreas donde están estos contenidos internos he intentado aplicar opacity:1 !important; pero no ha resultado.
Lo que me gustaría evitar es que los contenidos dentro de inner-frame hereden el índice de transparencia definido en class="trans50", es decir 50% y permanezcan opacos, opacity:1;

¿Tiene alguien alguna sugerencia? El código que tengo es el siguiente:

HTML:
---------------------------------------------------------------------------------------------------------------------------
<! - - Outer Box - Contenedor externo- - >
<div id="outer-frame" class="trans50">
< ! - - Inner Box - Contenedor interno - ->
<div id="inner-frame" class="trans50">
<! - - Contenidos - - >
<div id="title-top">
<img src="foto_titel.gif">
</div>
<div id="image-top">
<img src="foto_generalife.jpg">
</div>
<div id="image-middle">
<img src="foto_generalife_animado.gif">
</div>
<div id="image-bottom">
<img src="foto_generalife_wasser.gif" >
</div>
<div id="title-bottom" class="trans100">Mas texto aqui</div>

</div>
</div>
_______________________________________________________________________

CSS
_______________________________________________________________________

.trans50 {
filter:alpha(opacity=40);
-moz-opacity:.5;
opacity:.5;
}

/****************************************************
WRAPPERS
*****************************************************/

body{
margin-top: 0px;
background-image:url(foto_background.jpg);
background-repeat:repeat;
background-color:#000000;
color: #000000;
}

#outer-frame{
position:relative;
margin: 0 auto auto auto;
top:22px;
width:512px;
/*height:571px;*/
height:620px;
z-index:3;
background-color: #333333;
layer-background-color: #000000;
border: 1px none #000000;

}

#inner-frame{
position:relative;
margin: 0 auto auto auto;
top:12px;
width:470px;
/*height:544px;*/
height:595px;
z-index:4;
background-color: #000000;
layer-background-color: #000000;
border: 1px none #000000;
}

/**********************************************************
CONTENT
***********************************************************/
#title-top{
position:relative;
margin: 5px auto auto auto;
width:420px;
height:50px;
z-index:9;
}

#image-top{
position:relative;
margin: 1px auto auto;
width:420px;
height:324px;
z-index:13;
}

#image-middle{
position:relative;
margin: 0px auto auto auto;
width:420px;
height:52px;
z-index:12;
}

#image-bottom{
position:relative;
margin:auto;
top: -30px;
width:420px;
height:80px;
z-index:11
}

#title-bottom{
position:relative;
margin: auto;
top: 20px;
width:420px;
height:30px;
z-index:8;
color:#FFFFFF;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 18px
}

_______________________________________________________________________

Gracias por adelantado,

Lestomos

Saludos,

la solucion es aplicar la transparencia sólo al objeto: imagen, texto, etc. y no al DIV que contiene todo. Por ejemplo:

<div id="image-top">
<img src="foto_generalife.jpg" class="trans50">
</div>

o

<div id="image-top" class="trans50">
<img src="foto_generalife.jpg">
</div>

Etc..

Espero sea útil.

el layer opaco o transparente NO DEBE contener al layer que contiene los objetos