Maison > Article > interface Web > Voici quelques titres basés sur des questions basés sur l’article fourni : Officiel
Remplacement de l'opacité héritée pour les éléments enfants
En CSS, les éléments héritent de l'opacité de leurs éléments parents. Pour ajuster uniquement l'opacité du parent tout en préservant l'apparence originale de l'enfant, envisagez les approches suivantes :
1. Calculs d'opacité :
Les valeurs d'opacité sont multiplicatives. Cela signifie qu'un élément avec une opacité de 0,5 au sein d'un parent avec une opacité de 0,6 aura une opacité effective de 0,3 (0,5 * 0,6).
Exemple :
<code class="css">#parent { opacity: 0.6; } #child { opacity: 1; }</code>
Dans cet exemple, l'élément #child apparaîtra opaque même si son parent a une opacité translucide.
2. Repositionner l'enfant :
Si possible, déplacez l'élément #child en dehors de l'élément #parent. Cela évitera à l'enfant d'hériter de l'opacité du parent.
3. Utilisation des couleurs RGBA pour l'enfant :
Au lieu de définir l'opacité directement sur le parent, utilisez des couleurs RGBA pour l'arrière-plan, la bordure ou la police de l'élément enfant. Les couleurs RGBA spécifient l'opacité comme quatrième valeur :
<code class="css">#child { background-color: rgba(255, 165, 0, 0.5); }</code>
Remarques supplémentaires :
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!