Comment puis-je appliquer un filtre en niveaux de gris aux images dans Internet Explorer 10 ?

Application d'un filtre en niveaux de gris dans Internet Explorer 10 : un guide détaillé

Internet Explorer 10 présente un défi unique pour l'application de filtres en niveaux de gris aux images. Contrairement aux versions précédentes d'IE, IE10 ne prend pas en charge les filtres DX et les filtres de niveaux de gris préfixés. Cependant, il existe une solution de contournement qui exploite les superpositions SVG pour obtenir l'effet souhaité.

Solution : superposition SVG

Pour appliquer un filtre en niveaux de gris dans Internet Explorer 10, vous pouvez utilisez le CSS suivant :

<code class="css">img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/><\/filter><\/svg>#grayscale");
}</code>

Dans ce code, l'état de survol est utilisé pour activer le filtre au survol de la souris. La propriété filter pointe vers une superposition SVG qui contient un élément feColorMatrix, qui spécifie la conversion en niveaux de gris.

Exemple d'utilisation :

<code class="html"><svg>
    <image href="image.jpg" class="grayscale" />
</svg></code>

Prise en charge du navigateur :

L'approche de superposition SVG est prise en charge dans Internet Explorer 10 et versions ultérieures.

Ressources supplémentaires :

• [Cross-Browser Image en niveaux de gris avec CSS](http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html)
• [Effets de filtre SVG dans IE10](http : //blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx)

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!