Como criar imagens de fundo em escala de cinza com CSS

Nesta era de web designs vibrantes e dinâmicos, às vezes é necessário incorporar um toque de simplicidade sutil. Uma maneira de conseguir isso é convertendo imagens de fundo em escala de cinza, o que pode transmitir uma estética clássica ou vintage a um site.

Filtros CSS3 para vários navegadores

A abordagem mais direta para escalar um fundo em escala de cinza imagem é aplicar o filtro CSS3 em escala de cinza:

-webkit-filter: grayscale(100%);

No entanto, esta técnica só funciona no Chrome v.15 e Safari v.6 devido a limitações de compatibilidade do navegador.

Filtro SVG entre navegadores

Para obter efeitos de escala de cinza entre navegadores, você pode 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 solução funciona na maioria dos principais navegadores, incluindo Firefox, Chrome e Edge.

jQuery Animation

Se quiser alternar o efeito da escala de cinza dinamicamente usando JavaScript, você pode empregar jQuery:

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

Este código adicionará uma classe de escala de cinza e desbotará a imagem quando você passar o mouse sobre ela.

Compatibilidade com IE10-11

No Internet Explorer 10-11, o SVG acima a técnica de filtro não funciona. Em vez disso, você pode usar um filtro de dessaturação:

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

Este filtro pode ser aplicado a imagens usando o atributo filter.

Ao utilizar esses métodos, você pode facilmente usar imagens de fundo em tons de cinza em CSS, adicionando um toque atemporal à sua web designs, mantendo a compatibilidade entre navegadores.