Greyscale Background Css Imágenes

He buscado mucho en la web, pero no puedo encontrar una solución de navegador cruzado para desvanecer una imagen backgrund css en escala de grises y viceversa.

La única solución de trabajo es aplicar la escala de grises de filtro CSS3:

-webkit-filter: grayscale(100%); 

pero esto funciona solo con Chrome v.15 + y Safari v.6 + (como se puede ver aquí: http://css3.bradshawenterprises.com/filters/ )

Muchas páginas en línea hablan sobre esta solución para atenuar los elementos:

 filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ 

(como se puede ver aquí: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html )

Pero en realidad no parece funcionar para las imágenes de fondo CSS, como lo hace el filtro webkit.

¿Hay alguna solución (tal vez con jquery?) Para hackear esta falta de soporte para filtrar en buscadores menos avanzados?

Aqui tienes:

   bluantinoo CSS Grayscale Bg Image Sample    
this is a non-grayscale of the bg image
this is a grayscale of the bg image

Probado en FireFox, Chrome e IE. También adjunté una imagen para mostrar los resultados de mi implementación de esto. Imagen de fondo en escala de grises en muestra DIV

EDITAR: Además, si quieres que la imagen simplemente alterne con jQuery, aquí está el origen de la página para eso … He incluido el enlace web a jQuery y a la imagen que está en línea, así que solo debes poder copiar / pegar para probarlo:

   bluantinoo CSS Grayscale Bg Image Sample      
rollover this image to toggle grayscale

EDIT 2 (Para usuarios de IE10-11): la solución anterior no funcionará con los cambios que Microsoft ha realizado en el navegador últimamente, así que aquí hay una solución actualizada que le permitirá escalar (o desaturar) sus imágenes en escala de grises.

         

Usando los navegadores actuales puedes usarlo así:

 img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); } 

y para remediarlo:

 img:hover{ -webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */ filter: grayscale(0%); } 

trabajó conmigo y es mucho más corto. Hay incluso más que uno puede hacer dentro del CSS:

 filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); 

Para obtener más información y navegadores compatibles, vea esto: http://www.w3schools.com/cssref/css3_pr_filter.asp

También puedes usar:

 img{ filter:grayscale(100%); } img:hover{ filter:none; } 

¡No necesita usar una encoding complicada realmente!

Escala de Grises:

-webkit-filter: escala de grises (100%);

Escala de grises “Hover-out”:

-webkit-filter: escala de grises (0%);


Simplemente hice que mi clase css tuviera una clase de vuelo flotante por separado y se agregara en la segunda escala de grises. Es realmente simple si realmente no te gusta la complejidad.