Maison >interface Web >tutoriel CSS >Comment définir l'opacité de l'arrière-plan d'une division sans affecter les éléments contenus dans IE 8 ?
Définition de l'opacité de l'arrière-plan div sans affecter les éléments contenus dans IE 8
Le style d'opacité affecte à la fois l'élément parent et ses éléments enfants, ce qui peut être indésirable dans certains scénarios. Pour définir l'opacité de l'arrière-plan d'un div sans impacter les éléments contenus, pensez à utiliser une approche différente :
Utiliser la couleur d'arrière-plan rgba()
La fonction rgba() permet vous de spécifier les valeurs rouge, vert, bleu (RVB), ainsi qu'une valeur de canal alpha. La valeur du canal alpha détermine l'opacité. Par exemple :
.myelement { background: rgba(200, 54, 54, 0.5); }
Ici, les trois premiers nombres représentent les valeurs de couleur RVB, tandis que 0,5 représente l'opacité du canal alpha (50 %).
Solution spécifique à IE : CSS3Pie
Cependant, cette méthode ne prend pas en charge IE 8 et versions antérieures. Pour résoudre ce problème, vous pouvez utiliser le polyfill CSS3Pie. CSS3Pie prend en charge diverses fonctionnalités CSS3 modernes, notamment les couleurs d'arrière-plan rgba. Pour l'utiliser :
.myelement { background: rgba(200, 54, 54, 0.5); -pie-background: rgba(200, 54, 54, 0.5); behavior: url(PIE.htc); }
Alternative : le style de filtre d'IE avec dégradé
Une autre alternative qui fonctionne dans IE consiste à utiliser le style de filtre avec le mot-clé dégradé. Cependant, cette approche est moins intuitive et nécessite une interaction directe avec les filtres d'IE.
Notes supplémentaires
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!