Comment créer des images d'arrière-plan en niveaux de gris avec CSS

À l'ère des conceptions Web vibrantes et dynamiques, il est parfois nécessaire d'incorporer une touche de simplicité subtile. Une façon d'y parvenir consiste à convertir les images d'arrière-plan en niveaux de gris, ce qui peut conférer une esthétique classique ou vintage à un site Web.

Filtres CSS3 multi-navigateurs

L'approche la plus simple pour mettre en niveaux de gris un arrière-plan l'image consiste à appliquer le filtre CSS3 niveaux de gris :

-webkit-filter: grayscale(100%);

Cependant, cette technique ne fonctionne que dans Chrome v.15 et Safari v.6 en raison de limitations de compatibilité des navigateurs.

Filtre SVG multi-navigateurs

Pour obtenir des effets de niveaux de gris multi-navigateurs, vous pouvez utiliser des filtres 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");

Cette solution fonctionne dans la plupart des principaux navigateurs, notamment Firefox, Chrome et Edge.

jQuery Animation

Si vous souhaitez activer dynamiquement l'effet de niveaux de gris à l'aide de JavaScript, vous pouvez utiliser jQuery :

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

Ce code ajoutera une classe de niveaux de gris et fondra l'image lors du survol.

Compatibilité IE10-11

Dans Internet Explorer 10-11, le SVG ci-dessus la technique de filtrage ne fonctionne pas. À la place, vous pouvez utiliser un filtre de désaturation :

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

Ce filtre peut être appliqué aux images à l'aide de l'attribut filter.

En utilisant ces méthodes, vous pouvez facilement mettre en niveaux de gris les images d'arrière-plan en CSS, ajoutant ainsi une touche intemporelle à votre site Web. conceptions tout en conservant la compatibilité entre navigateurs.