Maison > interface Web > tutoriel CSS > Comment rendre une couleur d'arrière-plan transparente tout en gardant le texte opaque ?

Comment rendre une couleur d'arrière-plan transparente tout en gardant le texte opaque ?

Mary-Kate Olsen
Libérer: 2024-12-23 10:14:21
original
705 Les gens l'ont consulté

How to Make a Background Color Transparent While Keeping Text Opaque?

Opacité de la couleur d'arrière-plan sans affecter le texte

Dans le monde du développement Web, atteindre la transparence est souvent essentiel pour améliorer l'attrait visuel et fonctionnalité des éléments du site Web. Une exigence courante consiste à appliquer de la transparence à l'arrière-plan d'un div tout en conservant l'opacité du texte inclus. Cela peut poser un défi, en particulier pour assurer la compatibilité entre navigateurs.

La solution rgba

La solution la plus efficace et la plus largement prise en charge consiste à utiliser le « RGBA » ( Propriété Rouge, Vert, Bleu, Alpha). Voici un exemple :

.alpha60 {
  background-color: rgba(0, 0, 0, 0.6);
}
Copier après la connexion

La propriété 'rgba' spécifie la couleur d'arrière-plan ainsi que son canal alpha ou sa transparence. Dans ce cas, l'arrière-plan est noir avec une opacité de 60 %. Cette approche fonctionnera dans la plupart des navigateurs modernes.

Retours IE

Pour assurer la compatibilité entre navigateurs, y compris les anciennes versions d'Internet Explorer, des règles CSS supplémentaires sont requises :

.alpha60 {
  background-color: rgb(0, 0, 0);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
Copier après la connexion

La propriété 'rgb' définit la couleur d'arrière-plan de secours pour IE, tandis que les propriétés 'filter' et Les propriétés '-ms-filter' appliquent la transparence dans les versions 5.5 à 7 et 8, respectivement.

Remarque pour les navigateurs IE

Pour garantir la transparence, il est essentiel de déclarer ' background: transparent' dans la solution de secours CSS pour IE. Cela garantit que la couleur d'arrière-plan reste transparente même lorsque la prise en charge du canal alpha n'est pas disponible.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal