Comment puis-je facilement convertir des images en niveaux de gris à l'aide de filtres CSS ?

Convertir des images en niveaux de gris à l'aide de filtres CSS

Dans le domaine du développement Web, transformer une image en niveaux de gris peut présenter un défi. Les méthodes traditionnelles impliquant SVG ou Canvas peuvent prendre du temps. Cependant, avec l'avènement des filtres CSS, une solution plus simple et multi-navigateurs a émergé.

Filtrage en niveaux de gris multi-navigateurs

Les filtres CSS offrent un moyen pratique de modifier l'apparence des éléments, y compris les images. Le filtre grayscale() vous permet de convertir une image en niveaux de gris, imitant l'effet de suppression des informations de couleur.

Pour appliquer l'effet de niveaux de gris à une image, utilisez la propriété CSS suivante :

Exemple de code

Considérez le HTML suivant code :

Pour afficher l'image en niveaux de gris, ajoutez le style CSS :

Hover Override

Pour désactiver l'effet en niveaux de gris au survol, vous pouvez spécifier différentes valeurs de filtre :

Cela ramènera l'image à sa couleur d'origine lorsque la souris passe dessus.

Compatibilité des navigateurs

Les filtres CSS sont pris en charge dans les navigateurs modernes, notamment Webkit, Edge et Firefox 35 . Cependant, la prise en charge d'IE6-9 est limitée.

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!