Comment obtenir différentes opacités pour les éléments d'arrière-plan et de texte en CSS ?

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

Lorsque vous travaillez avec CSS, définir l'opacité des éléments est une tâche courante. Cependant, une confusion peut survenir lors de l'utilisation de l'opacité sur les éléments d'arrière-plan et enfants.

Question :

Je rencontre un comportement inattendu où l'opacité de l'arrière-plan et le texte à l'intérieur d'un conteneur est le même, malgré la définition de valeurs différentes. Comment puis-je contrôler l'opacité de chaque élément indépendamment ?

Réponse :

L'opacité CSS fonctionne de manière hiérarchique. Les éléments enfants héritent de l'opacité de leurs conteneurs parents. Par conséquent, définir l'opacité d'un conteneur sur une certaine valeur affectera également l'opacité de ses enfants.

Solution :

Pour obtenir différentes opacités pour l'arrière-plan et le texte , vous pouvez utiliser l'une des options suivantes :

1. Utilisez une image d'arrière-plan translucide :

Enregistrez votre image d'arrière-plan sous forme de fichier PNG avec transparence. Cela vous permettra d'avoir un fond translucide tout en conservant une opacité totale pour le texte.

2. Utiliser la couleur RGBa pour l'arrière-plan :

Spécifiez la couleur d'arrière-plan en utilisant le format RGBA, où la dernière valeur représente le canal alpha (opacité). Voici un exemple d'un fond noir décoloré à 50 % :

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

Remarque :

L'utilisation de l'opacité sur les éléments enfants n'est généralement pas recommandée, car elle peut entraîner des effets dans certains navigateurs.

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!