Comment puis-je convertir une image couleur en niveaux de gris en utilisant uniquement HTML et CSS ?

Conversion d'une image en niveaux de gris à l'aide de HTML/CSS

Cette question cherche à explorer une méthode simple pour afficher une image bitmap couleur en niveaux de gris uniquement via HTML et CSS. L'objectif est d'éviter la complexité liée à l'utilisation de SVG ou Canvas et de trouver une solution compatible avec Firefox 3 et Safari 3 ou version ultérieure.

Heureusement, l'émergence des filtres CSS dans Webkit a fourni une solution multi-navigateurs pour cette tâche. L'extrait de code suivant illustre comment obtenir l'effet de niveaux de gris souhaité :

<img src="image.png">

La propriété filter est prise en charge par Internet Explorer 6-9 et Microsoft Edge, tandis que la propriété -webkit-filter est prise en charge par Google Chrome, Safari 6 et Opera 15 .

Pour désactiver l'effet niveaux de gris au survol, les règles CSS suivantes peuvent être appliqué :

img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

Cette solution simple permet la conversion d'images couleur en niveaux de gris en HTML/CSS, sans nécessiter de surcharge supplémentaire de SVG ou Canvas.

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!