internet explorer 10 - ¿cómo aplicar filtro 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,<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 ?

Author: Cœur, 2013-02-11
Source

3 answers

IE10 no soporta filtros DX como IE9 y anteriores, ni soporta una versión prefijada del filtro de escala de grises.

Sin embargo, puede usar una superposición SVG en IE10 para lograr la escala 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 )

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

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

 30
Author: KatieK,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-11 18:59:57

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

He creado un proyecto llamado gray que incluye un polyfill para estos navegadores. El polyfill cambia 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 anterior y agregar después de jQuery al final de su cuerpo:

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

Entonces cada imagen con la clase grayscale aparecerá como gris.

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

Usted puede ver una demo también si lo desea.

 21
Author: Karl Horky,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-17 19:19:43

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

Esa parece ser la única solución entre navegadores. Además, tiene un agradable efecto de desvanecimiento y desvanecimiento.

 5
Author: Corni,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-19 06:45:57