Pourquoi les éléments enfants héritent-ils de l'opacité de leur parent et comment puis-je l'empêcher ?

Résolution de l'héritage d'opacité pour les éléments enfants

Lors de l'application de l'opacité à un élément parent, vous pouvez rencontrer le problème des éléments enfants héritant de cette opacité. Cela peut être indésirable si vous souhaitez que les éléments enfants conservent leur opacité d'origine.

Contrairement à l'hypothèse habituelle, ce problème n'est pas uniquement dû à l'héritage. Cela vient plutôt de la manière dont l’opacité est calculée. Prenons l'exemple suivant :

<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;
}

Bien qu'il puisse sembler que l'opacité de #quartier est équivalente à celle de #div parent, la div #parent a en réalité deux fois l'opacité de #quartier. Cela est évident dans le violon suivant : https://jsfiddle.net/HUaNm/.

Solution

La seule vraie solution à ce problème est de déplacer physiquement le élément enfant en dehors du parent. Alternativement, vous pouvez envisager d'utiliser des couleurs rgba pour l'arrière-plan, la bordure ou la police du parent au lieu de l'opacité, bien que l'effet soit différent.

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!