Forum d'entraide PHPFrance

Bonjour
J'ai encore un problème ;p

Lorsque je click sur l'image, ma div masqueHBox apparait en transparence.
Mon souci c'est la div infoHBox elle aussi est en transparence je la voudrais 100% opaque.

après plusieurs recherche et essai de code je n'y parviens toujours pas
un coup de main me ferais bien plaisir

Merci à tous

voici le code /

<style type="text/css">

#masqueHBox {
position: fixed;
display: none;/*none block*/
width: 100%;
height: 100%;
background-color: #093;
color: #fff;
top: 0px;
left: 0px;
z-index: 50;
}

#infoHBox {
position: relative;
margin: auto;
margin-top: 100px;
width: 280px;
height: 200px;
color: #000;
font-size: 13px;
text-align: center;
border: thin double #00B259;
background-color: #FFF;
}

body {
background-color: #8B9C98;
}

</style>

</head>
<body>
<div id="masqueHBox" >
<div id="infoHBox" >
<p>Info</p>
</div>
</div>
<div id="HBox" >
<img src="image.jpg" width="160" height="160" />
</div>
</body>
</html>

Salut,

Le comportement est normal puisque #masqueHBox a une opacité de 0 par exemple alors son enfant aura la même chose. Pour remédier à cela, il faut que les deux éléments soient frères. Le soucis, s'ils sont frères, ils seront disposés l'un en dessous de l'autre. La solution est qu'il faille englober ces deux éléments frères en position relative et les deux frères seront en position absolute avec un z-index à déterminer pour chacun d'eux.

Forum d'entraide PHPFrance

probleme de transparence sur des div

probleme de transparence sur des div

Re: probleme de transparence sur des div