Comment définir l'opacité d'un arrière-plan Div sans affecter les éléments contenus dans IE8 ?

Définition de l'opacité de l'arrière-plan d'un div sans affecter les éléments contenus dans IE 8

Définition de l'opacité de l'arrière-plan d'un div tout en préservant l'apparence de ses éléments contenus peut être difficile dans Internet Explorer 8. La propriété d'opacité couramment utilisée affecte à la fois le div et son contenu.

Couleur d'arrière-plan rgba

La solution recommandée consiste à utiliser une couleur d'arrière-plan rgba, où le canal "a" représente l'opacité. Cette approche fonctionne bien dans la plupart des navigateurs modernes mais n'est pas prise en charge dans IE8 et versions antérieures.

.myDiv {
  background: rgba(200, 54, 54, 0.5);
}

CSS3Pie Hack for IE

Pour obtenir la prise en charge de l'opacité dans IE8, vous peut utiliser CSS3Pie, un outil qui imite les fonctionnalités CSS3 des anciens navigateurs. Il introduit la propriété -pie-background, qui doit être utilisée conjointement avec l'attribut behavior.

.myDiv {
  background: rgba(200, 54, 54, 0.5);
  -pie-background: rgba(200, 54, 54, 0.5);
  behavior: url(PIE.htc);
}

Style de filtre d'IE

Vous pouvez également tirer parti du style de filtre d'IE. style de filtre avec le mot-clé gradient. Cette approche est utilisée en interne par CSS3Pie.

.myDiv {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33CCFF', endColorstr='#000000', GradientType=1);
}

Bien que cette technique nécessite une syntaxe plus spécifique, elle fournit une option de secours pour les navigateurs qui ne prennent pas en charge 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!