Maison > interface Web > tutoriel CSS > Comment puis-je rendre une division parent transparente sans affecter ses divisions enfants ?

Comment puis-je rendre une division parent transparente sans affecter ses divisions enfants ?

Susan Sarandon
Libérer: 2024-12-08 05:40:10
original
178 Les gens l'ont consulté

How Can I Make a Parent Div Transparent Without Affecting Its Child Divs?

Définition de l'opacité pour une div parent sans affecter la div enfant

La question concerne le réglage sélectif de l'opacité d'une div parent sans affecter ses éléments enfants. L'objectif est de maintenir la transparence uniquement pour le div parent tout en gardant les éléments enfants opaques.

Une solution efficace consiste à utiliser la méthode rgba(), qui spécifie les valeurs rouge, vert et bleu (RVB) ainsi qu'un valeur de transparence (alpha) en utilisant une décimale comprise entre 0 et 1.

Considérez le code HTML et CSS suivant code :

<div>
Copier après la connexion
.parent {
  background-color: rgba(255, 0, 0, 0.5);
}

.child {
  color: black;
}
Copier après la connexion

Dans le CSS, la propriété background-color de la classe .parent définit la transparence à 50 % à l'aide de la méthode rgba(). L'élément enfant hérite de la propriété color, qui est définie sur noir.

Cette solution permet des paramètres d'opacité indépendants pour les éléments parents et enfants, en conservant la transparence d'arrière-plan souhaitée pour le div parent tout en préservant l'opacité de ses éléments enfants. .

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal