comment annuler l'opacité d'un élément enfant?

Question

Je veux appliquer l'opacité pour le parent mais je ne veux pas que l'élément enfant hérite de cette opacité.

<div class="parent"> 
<div class="child"></div> 
</div> 

.parent { 
    opacity: 0.6; 
} 

Existe-t-il un moyen d '«annuler» l'opacité héritée? peut-être le forcer à opacity=1 pour l'élément enfant?

Answer 1

L'opacité de l'enfant aura toujours l'opacité du parent si l'opacité de l'enfant est 1.

Ce n'est pas un problème avec l'héritage, mais plutôt avec l'opacité de manière est calculée.

Par exemple,

<div id="parent"> 
    <div></div> 
</div> 

<div id="original"> 
</div> 

<div id="quarter"> 
</div> 

#parent div, #quarter { 
    width: 100px; 
    height: 100px; 
    background-color: orange; 
} 

#parent div { 
    opacity: 0.5; 
} 

#parent { 
    opacity: 0.5; 
} 

#quarter { 
    opacity: 0.25; 
} 

opacité de #quarter, de votre point de vue, est le même que celui de #parent div, mais en réalité, #parent div a l'opacité de #quarter deux fois. Voir ce jsFiddle pour plus de détails: http://jsfiddle.net/HUaNm/

---

La seule façon d'éviter cela est de déplacer l'enfant hors du parent. Alternativement, en fonction de ce que vous voulez ici, vous pouvez également utiliser les couleurs rgba pour la couleur de fond/bordure/police du parent au lieu de l'opacité, mais l'effet n'est pas le même que l'application de l'opacité.