¿Cómo desaturar y saturar una imagen usando CSS?

2 minutos de lectura

Avatar de usuario de Steven
steven

Actualizar

Me acabo de dar cuenta de que la desaturación solo funciona en Chrome. ¿Cómo hago que funcione en FF, IE y otros navegadores? (Título cambiado)


Estoy convirtiendo una imagen en color a escala de grises siguiendo las sugerencias aquí: Convertir una imagen a escala de grises en HTML/CSS

Y funciona muy bien (en Chrome): http://jsfiddle.net/7mNEC/

<img src="https://imagizer.imageshack.us/v2/350x496q90/822/z7ds.jpg" />

// CSSS
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");
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
    filter: gray; 
}

img:hover {
    filter: none;
    cursor: pointer;
}

Pero no puedo eliminar la desaturación, por ejemplo, al pasar el mouse.

¿Alguna idea de lo que estoy haciendo mal?

Solo tiene que invertir la escala de grises para cada propiedad CSS del prefijo del navegador:

img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);
    cursor: pointer;
}

http://jsfiddle.net/7mNEC/1/

  • Genial, eso funcionó. ¿Pero ves por qué la desaturación no funciona en FF e IE?

    – Esteban

    10 de abril de 2014 a las 17:29

  • @Steven Parece que Firefox no es compatible el lleno filter especificación todavía porque no se ha solidificado lo suficiente. IE 9 obsoleto -ms-filter e IE 10 no lo admite.

    – Alex W.

    11 de abril de 2014 a las 1:21


  • Bueno, la imagen es desagradable, pero el consejo es bastante útil. ¡Gracias!

    – sergio

    12 de marzo de 2019 a las 2:17

Avatar de usuario de Sphinxxx
esfinxxx

Dado que esta pregunta es sobre saturaciónla saturate() filtrar puede ser un mejor ajuste. Esto también permite colores súper saturados (valores superiores al 100%):

img {
    filter: saturate(0%);
}
img:hover {
    filter: saturate(300%);
}

https://jsfiddle.net/t1jeh8aL/

  • Tu jsfiddle está roto.

    – N-ate

    24 de abril de 2020 a las 15:36

  • @N-ate Gracias, arreglado.

    – Esfinxxx

    24 de abril de 2020 a las 21:47

Es más genial si agrega una transición como esta:

  img {
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
    cursor: pointer;
    transition: all 300ms ease;
  }
  img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);
  }

¿Ha sido útil esta solución?