Puis-je convertir des images en niveaux de gris en utilisant uniquement HTML et CSS ?

Conversion d'images en niveaux de gris avec HTML/CSS

Question :

Y a-t-il un moyen simple méthode d'affichage d'un bitmap couleur en niveaux de gris en utilisant uniquement HTML/CSS, sans encourir les complexités de SVG ou Canvas ?

Réponse :

Avec l'avènement des filtres CSS dans Webkit, une solution multi-navigateurs a émergé. Vous trouverez ci-dessous le code qui permet la transformation en niveaux de gris :

img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+, Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge, Firefox 35+ */
}

/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

Pour illustrer, voici un exemple de code HTML :

<img  src="/static/imghwm/default1.png" data-src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Wikimedia_Canadian_Community_Logo.svg/240px-Wikimedia_Canadian_Community_Logo.svg.png" class="lazy" alt="Puis-je convertir des images en niveaux de gris en utilisant uniquement HTML et CSS ?" >

L'application de cette technique à une image la convertira en niveaux de gris, fournissant un solution simple et efficace pour l'affichage d'images monochromatiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!