Cómo crear imágenes de fondo en escala de grises con CSS

En esta era de diseños web vibrantes y dinámicos, a veces es necesario incorporar un toque de simplicidad sutil. Una forma de lograrlo es convertir imágenes de fondo a escala de grises, lo que puede impartir una estética clásica o vintage a un sitio web.

Filtros CSS3 entre navegadores

El enfoque más sencillo para aplicar una escala de grises a un fondo imagen es para aplicar el filtro CSS3 escala de grises:

-webkit-filter: grayscale(100%);

Sin embargo, esta técnica solo funciona en Chrome v.15 y Safari v.6 debido a limitaciones de compatibilidad del navegador.

Filtro SVG entre navegadores

Para lograr efectos de escala de grises en varios navegadores, puede utilizar filtros SVG:

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

Esta solución funciona en la mayoría de los navegadores principales, incluidos Firefox, Chrome y Edge.

Animación jQuery

Si desea alternar el efecto de escala de grises dinámicamente usando JavaScript, puede emplear jQuery:

$(".nongrayscale").hover(function () {
  $(this).addClass("grayscale").fadeTo(400, 1);
});
$(".grayscale").hover(function () {
  $(this).removeClass("grayscale").fadeTo(400, 1);
});

Este código agregará una clase de escala de grises y atenuará la imagen cuando se coloque el cursor sobre ella.

Compatibilidad IE10-11

En Internet Explorer 10-11, el SVG anterior La técnica de filtrado no funciona. En su lugar, puede utilizar un filtro de desaturación:

<filter xmlns="http://www.w3.org/2000/svg" id="desaturate">
  <feColorMatrix type="saturate" values="0" />
</filter>

Este filtro se puede aplicar a imágenes usando el atributo de filtro.

Al utilizar estos métodos, puedes fácilmente escalar grises las imágenes de fondo en CSS, agregando un toque atemporal a tu web. diseños manteniendo la compatibilidad entre navegadores.