Internet Explorer 10: ¿cómo aplicar el filtro de escala de grises?

Este código CSS funciona bastante bien para Internet Explorer hasta el 9.

img.gray { filter: url("data:image/svg+xml;utf8,#grayscale"); filter: gray; -webkit-filter: grayscale(1); } 

Pero, ¿qué debo hacer para Internet Explorer 10?

IE10 no admite filtros DX como lo han hecho IE9 y versiones anteriores, ni admite una versión prefijada del filtro de escala de grises.

Sin embargo, puede usar una superposición SVG en IE10 para lograr la clasificación de grises. Ejemplo:

 img.grayscale:hover { filter: url("data:image/svg+xml;utf8,#grayscale"); } svg { background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg); } 

(de: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html )

Simplificado JSFiddle: http://jsfiddle.net/KatieK/qhU7d/2/

Más sobre los efectos de filtro IE10 SVG: http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

Inline SVG se puede usar en IE 10 y 11 y Edge 12.

Creé un proyecto llamado gray que incluye un polyfill para estos navegadores. El polyfill conmuta las tags con SVG en línea: https://github.com/karlhorky/gray

Para implementar, la versión corta es descargar el plugin jQuery en el enlace de GitHub arriba y agregar después de jQuery al final de su cuerpo:

  

Entonces, cada imagen con la grayscale clase aparecerá en gris.

  

Puedes ver una demostración también si quieres.

Utilice este plugin jQuery https://gianlucaguarini.github.io/jQuery.BlackAndWhite/

Esa parece ser la única solución de navegador múltiple. Además, tiene un bonito efecto de fundido de entrada y salida.