css3 - para - imagenes escala de grises definicion
Imagen de CSS en escala de grises para IE 10 (3)
¿Hay alguna manera de hacer que el filtro de imagen en escala de grises funcione en IE 10 sin JavaScript o SVG?
He estado utilizando el siguiente código con éxito en todos los navegadores, excepto en IE 10.
img{
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"); /* Firefox 10+, Firefox on Android */
filter:gray; /* IE6-9 */
-webkit-filter:grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);}
Este enfoque solo funciona en WebKit y Firefox. No funciona en IE u Opera. Actualmente, WebKit es el único navegador que admite filtros CSS, mientras que Firefox admite filtros SVG en HTML. Opera e IE admiten filtros SVG, pero solo para contenido SVG.
No hay una buena manera de hacer que esto funcione en IE10, ya que dejó de admitir los filtros heredados de IE. Hay una forma, sin embargo, no lo recomendaría.
Puede configurar IE10 para renderizar usando el modo de estándares IE9 usando el siguiente elemento meta en el encabezado:
<meta http-equiv="X-UA-Compatible" content="IE=9">
Esto volverá a activar el soporte para filtros heredados de IE. Sin embargo, tiene el efecto secundario de dejar IE en el modo IE9, donde los últimos avances en IE10 ya no serán compatibles. En su caso, es posible que no necesite estas nuevas funciones actualmente, pero si continúa por este camino, deberá tenerlo en cuenta al actualizar el sitio en el futuro.
http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js/
Los enlaces de arriba dan una buena idea para> IE10 y otros navegadores.
Esta es una solución de navegador cruzado que usa HTML5 y jquery con efecto de fundido