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

• rgba() ne fonctionne pas dans IE 8 ou version antérieure.
• CSS3Pie ajoute des fonctionnalités CSS3 supplémentaires, pas seulement des arrière-plans 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!