Maison > interface Web > tutoriel CSS > Comment puis-je facilement convertir des images en niveaux de gris à l'aide de filtres CSS ?

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

Susan Sarandon
Libérer: 2024-12-15 02:09:09
original
420 Les gens l'ont consulté

How Can I Easily Convert Images to Grayscale Using CSS Filters?

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal