Pourquoi mon texte hérite-t-il de l'opacité de l'arrière-plan en CSS ?

L'opacité d'arrière-plan CSS revisitée

Lorsque vous utilisez CSS, vous pouvez rencontrer un scénario dans lequel vous définissez une opacité d'arrière-plan et attendez le texte dans ce conteneur pour rester totalement opaque. Cependant, vous constatez que le texte hérite également de l'opacité de l'arrière-plan, ce qui entraîne une apparence estompée.

Ce comportement est inhérent au CSS. Les éléments enfants, y compris le texte, héritent des propriétés d'opacité de leurs éléments parents. Pour résoudre ce problème, il existe quelques options :

• Utilisez un fichier PNG translucide pour l'image d'arrière-plan : Les images PNG translucides prennent en charge différents degrés d'opacité, vous permettant de créer un fond partiellement transparent tout en conservant l'opacité souhaitée pour le texte.
• Utilisez une couleur RGBa pour l'arrière-plan : RGBa est un format de couleur étendu qui inclut un canal alpha pour l'opacité. Vous pouvez spécifier les valeurs RGBA ainsi qu'un pourcentage de transparence. Par exemple :

<code class="css">background-color: rgba(0, 0, 0, 0.5);</code>

Ce code définira la couleur d'arrière-plan sur 50 % de noir transparent, permettant au texte de rester 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!