Comment puis-je rendre l'arrière-plan d'un div opaque sans affecter son texte ?

Opacité CSS pour la couleur d'arrière-plan uniquement, mais pas pour le texte

Problème :

Est-il possible de définir la propriété d'opacité exclusivement pour l'arrière-plan d'un div, sans affecter le texte qu'il contient ?

Initial Tentative :

Le code suivant a été tenté :

background: #CCC;
opacity: 0.6;

Cependant, cette méthode n'a pas réussi à modifier l'opacité de l'arrière-plan.

Solution :

Pour créer un arrière-plan transparent tout en laissant le texte inchangé, pensez à utiliser la fonction rgba() function:

background: rgba(R, G, B, A);

rgba() Syntaxe de la fonction:

• R, G, B: Entiers ou pourcentages représentant le rouge, valeurs vertes et bleues.
• A : Valeur alpha comprise entre 0 et 1 ou un pourcentage, où 1 représente l'opacité totale.

Exemple :

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

Ce code crée un arrière-plan opaque à 40 % avec une couleur verte.

Compatibilité des navigateurs :

À partir de 2018, pratiquement tous les navigateurs modernes prennent en charge la syntaxe rgba().

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!