Application de filtres en niveaux de gris dans Internet Explorer 10

Internet Explorer 10 présente un défi pour l'application de filtres en niveaux de gris à l'aide des méthodes CSS traditionnelles. Contrairement aux versions précédentes d'IE, les filtres DX et les filtres en niveaux de gris préfixés ne sont plus pris en charge.

Solution : superposition SVG

Pour les images en niveaux de gris dans IE10, vous pouvez utiliser un fichier SVG. recouvrir. Cela implique l'utilisation d'un filtre SVG avec une matrice qui convertit l'image en niveaux de gris.

Code 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");
}

Considérations supplémentaires :

• La technique de superposition SVG fonctionne mieux lorsque l'image a un arrière-plan uni.
• Pour plus d'informations sur SVG effets de filtre dans IE10, reportez-vous à : http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

Exemple :

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}