Comment puis-je empêcher mes éléments enfants d'hériter de l'opacité ?

Comprendre l'opacité et l'héritage de l'arrière-plan CSS

En CSS, la propriété opacity contrôle la transparence d'un élément. Par défaut, l'opacité est définie sur 1,0, ce qui signifie que l'élément est totalement opaque. Des valeurs d'opacité inférieures indiquent une transparence croissante.

Lorsque plusieurs éléments imbriqués ont des valeurs d'opacité différentes, les éléments enfants héritent de l'opacité de leur élément parent. Cela signifie que, sauf indication contraire explicite de votre part, tous les enfants d'un élément avec une opacité réduite auront également la même opacité réduite.

Résoudre le problème de l'opacité héritée

Dans le code fourni, bien que le div interne ait une opacité de 1,0, il apparaît avec une opacité de 0,4 car il hérite de l'opacité définie sur son div parent. Pour résoudre ce problème, il existe quelques options :

• Utiliser une image PNG translucide : Pour l'image d'arrière-plan, pensez à utiliser un fichier PNG intrinsèquement semi-transparent (par ex. , a une opacité réduite). Cela garantira que l'arrière-plan est correctement transparent tout en conservant l'opacité totale du texte.

• Utiliser les couleurs RGBA : Pour la couleur d'arrière-plan, vous pouvez utiliser RGBA (Rouge, Vert , Bleu, Alpha). Alpha représente la transparence, où 0 est entièrement transparent et 255 est entièrement opaque. En spécifiant une valeur RGBA avec une composante alpha inférieure à 255, vous pouvez obtenir un arrière-plan translucide tout en gardant le texte totalement opaque. Par exemple :

  <code class="css">div {
  background-color: rgba(0, 0, 0, 0.5); /* 50% faded black background */
  }</code>

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!