Div opaque superposant une div avec une opacité de 0,7

Bonjour !

J'ai un problème que malgrès mes recherches je n'arrive pas à résoudre.
J'aimerai superposer deux divs, celle de dessous avec une opacité de 0,7 et une plus petite au dessus avec une opacité de 1 (c'est pour faire un peu comme l'effet donné par lightbox sur les image mais avec un bloc).

J'ai la css suivante :

.divDetailContainer {
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	background-color:#DDDDDD;
	opacity:0.7;
        filter:alpha(opacity=70);
        text-align:center;
        z-index:10;
} 
 
.divDetailArticle {
	margin-left: auto;
        margin-right: auto;
	border:1px solid #969696;
	background-color:white;
	top:200px;
	width:600px;
	height:450px;
	z-index:100;
	text-align:left;
	color:#969696;
	font-family:verdana;
	font-size:11px;
	opacity:1.0;
        filter:alpha(opacity=100);
}

Sur des blocs déclarés comme ceci :

    <div id="div_detailArticleContainer" class="divDetailContainer">
        <div id="div_detailArticle" class="divDetailArticle">
        </div> 
    </div>

Mais voila ... la div supérieure est toujours de la même opacité que celle d'en dessous, donc 0,7. Le fait de désimbriquer les div ne change pas la finalité...

Si quelqu'un à déjà eu ce problème et a su le résoudre...

Merci d'avance !

Bonjour,

highmqn a écrit :
Mais voila ... la div supérieure est toujours de la même opacité que celle d'en dessous, donc 0,7.

Faux. La div supérieure a bien une opacité de 1, mais elle appartient à son parent qui a une opacité de 0.7. Cette opacité partielle s'applique au parent, à ses enfants et à tous ses descendants, et ne peut pas être «rétablie». Pour cette raison, on utilise rarement opacity sur un conteneur.

Il y a fort à parier que pour obtenir l'effet que tu souhaites une simple image de fond en PNG-24 suffise. As-tu déjà exploré cette piste?