Puis-je rendre transparente uniquement la couleur d'arrière-plan d'un élément en CSS ?

Est-il possible de limiter l'opacité CSS à la couleur d'arrière-plan à l'exclusion du texte ?

En CSS, la propriété opacité contrôle la transparence d'un élément. Cependant, vous pouvez rencontrer une situation où vous souhaitez appliquer l'opacité uniquement à la couleur d'arrière-plan d'un élément sans affecter le texte.

Problème :

Comme vous l'avez observé , le simple fait de définir l'opacité pour la propriété background n'obtient pas l'effet souhaité. effet.

Solution :

Pour obtenir le résultat souhaité, vous pouvez utiliser la fonction rgba(). Cette fonction vous permet de spécifier la couleur et l'opacité d'un élément à travers quatre canaux : rouge, vert, bleu et alpha.

La syntaxe de rgba() est la suivante :

rgba(R, G, B, A)

où :

• R, G et B représentent respectivement les composantes rouge, verte et bleue de la couleur. Ces valeurs peuvent être spécifiées sous forme d'entiers ou de pourcentages.
• A représente le canal alpha, qui contrôle la transparence de l'élément. Une valeur de 0 correspond à une transparence totale, tandis qu'une valeur de 1 correspond à une opacité totale.

Par exemple, pour rendre le fond d'un élément partiellement transparent tout en préservant l'opacité du texte, vous pourriez utilisez le code suivant :

background: rgba(51, 170, 51, 0.6);

Dans ce code, la fonction rgba() est utilisée pour spécifier un fond vert clair avec 60 % d'opacité. La couleur du texte ne sera pas affectée par cet ajustement d'opacité.

Depuis 2018, la syntaxe rgba() est prise en charge par pratiquement tous les principaux 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!