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

Filtre en niveaux de gris dans Internet Explorer 10

Les filtres CSS, y compris les niveaux de gris, ont été largement utilisés pour améliorer les images dans le développement Web. Cependant, à mesure que la technologie progresse, différents navigateurs implémentent les filtres différemment, ce qui entraîne des problèmes de compatibilité.

Dans les versions 9 et antérieures d'Internet Explorer, l'application d'un filtre en niveaux de gris via CSS était simple à l'aide des filtres DX. Cependant, cette approche ne fonctionne plus dans Internet Explorer 10.

Solution pour Internet Explorer 10

Internet Explorer 10 a introduit des effets de filtre SVG, offrant une méthode alternative pour réaliser une conversion en niveaux de gris. Voici comment appliquer un filtre en niveaux de gris à l'aide d'une superposition SVG :

<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>

Le code CSS ci-dessus convertit une image en niveaux de gris lorsque l'utilisateur la survole. La propriété filter utilise une image SVG comme superposition, qui contient un effet de filtre qui convertit les couleurs de l'image en niveaux de gris.

Informations complémentaires

Pour plus d'informations sur les effets de filtre SVG dans Internet Explorer 10, veuillez vous référer aux ressources suivantes :

• [Effets de filtre SVG dans Internet Explorer 10](http://blogs.msdn.com/b/ie/archive/2011/10/14/svg- filter-effects-in-ie10.aspx)
• [Niveaux de gris d'image multi-navigateurs avec CSS](http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with- css.html)
• [JSFiddle simplifié](http://jsfiddle.net/KatieK/qhU7d/2/)

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!