internet-explorer - para - internet explorer 10 windows 7

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

Question

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

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

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

Answer 1

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 etiquetas <img> 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:

<script src="/js/jquery.gray.min.js"></script>

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

<img src="/img/color.jpg" class="grayscale">

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

Answer 2

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.

Answer 3

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

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