Maison > interface Web > tutoriel CSS > Comment définir l'opacité des arrière-plans div sans affecter les éléments contenus dans IE 8 ?

Comment définir l'opacité des arrière-plans div sans affecter les éléments contenus dans IE 8 ?

Linda Hamilton
Libérer: 2024-11-09 04:13:02
original
858 Les gens l'ont consulté

How do I set opacity for div backgrounds without affecting contained elements in IE 8?

Comment définir l'opacité des arrière-plans Div sans modifier les éléments contenus dans IE 8

Lorsque vous essayez d'appliquer l'opacité à l'arrière-plan d'un élément div sans affecter ses éléments contenus dans IE 8, les méthodes suivantes échouent souvent :

  • Utilisation de la propriété CSS opacity : cela affecte à la fois le div et son contenu.
  • Utilisation d'images png avec opacité : Ce n'est pas une solution dynamique.

Solution

À la place, utilisez la fonction CSS rgba() pour spécifier la couleur d'arrière-plan, y compris un canal alpha pour opacité :

.myelement {
    background: rgba(200, 54, 54, 0.5);
}
Copier après la connexion

Pour la compatibilité avec IE8

Pour prendre en charge les anciennes versions d'IE, envisagez d'utiliser CSS3Pie, qui ajoute la prise en charge de rgba à IE. Feuille de style modifiée :

.myelement {
    background: rgba(200, 54, 54, 0.5);
    -pie-background: rgba(200, 54, 54, 0.5);
    behavior: url(PIE.htc);
}
Copier après la connexion

Méthode alternative pour les filtres IE

Les filtres IE peuvent également être utilisés avec le mot-clé dégradé :

.myelement {
    filter: gradient(startColorstr='#990000', endColorstr='#990000', GradientType=0);
    opacity: 0.5;
}
Copier après la connexion

Remarque que la valeur d'opacité ne peut pas être spécifiée via la propriété de filtre directement dans IE.

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