Comment préserver l'opacité des éléments enfants tout en appliquant l'opacité au parent ?

Préserver l'opacité dans les éléments enfants lors de l'application au parent

Lors de l'application de l'opacité à un élément parent, la propriété d'opacité est héritée par ses éléments enfants . Cependant, dans certains scénarios, il peut être souhaitable « d'annuler » cette opacité héritée pour des éléments enfants spécifiques.

L'héritage de l'opacité est un comportement fondamental du HTML et du CSS. Si l'opacité d'un élément enfant est définie sur 1, il héritera toujours de l'opacité de son parent, malgré toute déclaration d'opacité ultérieure sur l'enfant.

Solution

Bien qu'il ne soit pas possible d'annuler complètement l'opacité héritée, il existe des approches alternatives qui peuvent obtenir un effet similaire.

• Déplacer l'élément enfant خارج من الوالد : En supprimant l'élément enfant de la hiérarchie DOM du parent, il n'héritera plus de l'opacité du parent.
• Utilisez les couleurs RVBA : Au lieu d'appliquer l'opacité, utilisez des couleurs rgba pour l'arrière-plan, la bordure ou le texte de l'élément parent. . Les couleurs RVBA permettent de spécifier la transparence sans affecter l'opacité de l'élément enfant.

Exemple

Considérez le code suivant :

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

<code class="css">.parent {
  opacity: 0.6;
}</code>

Dans cet exemple, l'élément enfant héritera de l'opacité du parent de 0,6.

Pour "annuler" cet héritage, vous pourriez utiliser des couleurs rgba pour l'arrière-plan du parent :

<code class="css">.parent {
  background-color: rgba(255, 165, 0, 0.6);
}</code>

Ceci entraînerait un arrière-plan semi-transparent pour le parent, mais l'élément enfant resterait totalement opaque.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!