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

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

En CSS, l'opacité contrôle la transparence d'un élément. Lorsqu'il est appliqué à un conteneur, cela affecterait naturellement à la fois l'arrière-plan et ses éléments enfants.

Le problème de l'héritage

Pour obtenir différentes opacités pour l'arrière-plan et les éléments enfants, L'héritage CSS pose un défi. Les éléments enfants héritent de l'opacité de leurs conteneurs parents, ce qui donne la même opacité pour l'arrière-plan et le texte dans l'exemple fourni.

Solutions pour obtenir l'opacité souhaitée

Pour y parvenir Pour obtenir l'effet souhaité, envisagez les alternatives suivantes :

• Image d'arrière-plan translucide : Utilisez une image PNG avec transparence et définissez-la comme image d'arrière-plan. Cela permet à l'arrière-plan d'avoir une opacité partielle tandis que les éléments enfants conservent une opacité totale.
• Couleur RVBa pour l'arrière-plan : Utilisez le format de couleur RVBA, qui intègre un quatrième paramètre pour l'opacité. Définissez la valeur alpha sur un nombre compris entre 0 et 1 pour contrôler l'opacité de l'arrière-plan. Par exemple, rgba(0, 0, 0, 0.5) désigne un arrière-plan noir avec une opacité de 50 %.

En tirant parti de ces solutions, vous pouvez contrôler efficacement l'opacité de l'arrière-plan et des éléments enfants dans votre style CSS.

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!