Comment définir l'opacité dans la div parent et ne pas l'affecter dans la div enfant ?

Question

Je cherche dans Google mais je ne trouve pas de réponse parfaite.

Je veux modifier l'opacité du DIV parent mais pas celle du DIV enfant.

Ejemplo

HTML

<div class="parent">
<div class="child">
Hello I am child 
</div>
</div>

Css

.parent{
background:url('../images/madu.jpg') no-repeat 0 0;
}
.child{
Color:black;
}

Note : -- Je veux image d'arrière-plan en Parent Div pas de couleur

Answer 1

J'ai eu le même problème et je l'ai résolu en définissant une image png transparente comme arrière-plan pour la balise parent.

Voici l'image PNG 1px x 1px que j'ai créée avec une opacité de 60 % du fond noir. !

Answer 2

Consultez cet article de blog sur CSS-Tricks pour savoir comment le faire :

• Éléments non transparents à l'intérieur d'éléments transparents

Answer 3

Vous ne pouvez pas le faire, à moins de retirer l'enfant du parent et de le placer via le positionnement.

Le seul moyen que je connaisse et qui fonctionne vraiment, c'est de utiliser une image translucide (.png avec transparence) pour l'arrière-plan du parent. Le seul inconvénient est que vous ne pouvez pas contrôler l'opacité via CSS, à part cela, ça fonctionne !