Comment puis-je appliquer l'opacité à un élément parent sans affecter son enfant ?

Opacité dans l'élément parent sans affecter l'enfant

La question initiale cherchait une solution pour appliquer l'opacité à un élément parent sans affecter l'opacité de son élément enfant. Cela peut être difficile car par défaut, l'opacité appliquée au parent affectera également tous les éléments enfants.

Cependant, une technique couramment utilisée consiste à utiliser la fonction rgba() en CSS, qui vous permet de définir une couleur avec sa valeur d'opacité. Pour obtenir le résultat souhaité, vous pouvez définir la couleur d'arrière-plan de l'élément parent à l'aide de rgba() avec une valeur d'opacité transparente. Par exemple :

.parent {
  background-color: rgba(0, 0, 0, 0.5);
}

Dans cet exemple, l'élément parent aura un fond noir transparent à 50 %, tandis que l'élément enfant ne sera pas affecté et conservera sa couleur d'origine, comme démontré ci-dessous :

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

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!