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

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>
<pre class="brush:php;toolbar:false">.parent {
  background-color: rgba(255, 0, 0, 0.5);
}

.child {
  color: black;
}

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. .