Maison > Article > interface Web > Exemple de transformation d'une image en mode gris à l'aide de CSS3
Exemple de transformation d'une image en mode gris à l'aide de CSS3
- 高洛峰original
- 2017-03-02 15:41:411999parcourir
Cet article explique avec vous comment utiliser CSS3 pour transformer les images en mode gris. C'est très simple à mettre en œuvre et les amis dans le besoin peuvent s'y référer.
Exemple de code :
Le code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style type="text/css">
.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
img{width:400px;}
</style>
</head>
<body>
<img class="gray" src="<a href="http://b.hiphotos.baidu.com/zhidao/pic/item/1c950a7b02087bf4fbb05256f0d3572c11dfcf35.jpg">http://www.php.cn/;/a>">
<img class="gray" src="<a href="http://c.hiphotos.baidu.com/zhidao/pic/item/03087bf40ad162d9e0c359f214dfa9ec8a13cd2a.jpg">http://www.php.cn/;/a>" />
<img src="<a href="http://b.hiphotos.baidu.com/zhidao/pic/item/1c950a7b02087bf4fbb05256f0d3572c11dfcf35.jpg">http://www.php.cn/;/a>">
<img src="<a href="http://c.hiphotos.baidu.com/zhidao/pic/item/03087bf40ad162d9e0c359f214dfa9ec8a13cd2a.jpg">http://www.php.cn/;/a>" c/>
</body>
</html>Résumé
C'est tout pour ça article J'espère que vous aimerez tous le contenu. Merci pour votre soutien au site Web PHP chinois.
Pour plus d'articles sur des exemples de CSS3 transformant des images en mode gris, veuillez faire attention au site Web PHP chinois !
Déclaration：
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
Article précédent：Survol du bouton CSS3 pour obtenir un effet d'ouvertureArticle suivant：Survol du bouton CSS3 pour obtenir un effet d'ouverture