Exemple de transformation d'une image en mode gris à l'aide de CSS3-tutoriel CSS-php.cn

Exemple de transformation d'une image en mode gris à l'aide de CSS3

高洛峰

Libérer： 2017-03-02 15:41:41

original

2046 Les gens l'ont consulté

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">//m.sbmmt.com/;/a>">
 <img class="gray"  src="<a href="http://c.hiphotos.baidu.com/zhidao/pic/item/03087bf40ad162d9e0c359f214dfa9ec8a13cd2a.jpg">//m.sbmmt.com/;/a>" />
 <img src="<a href="http://b.hiphotos.baidu.com/zhidao/pic/item/1c950a7b02087bf4fbb05256f0d3572c11dfcf35.jpg">//m.sbmmt.com/;/a>">
 <img src="<a href="http://c.hiphotos.baidu.com/zhidao/pic/item/03087bf40ad162d9e0c359f214dfa9ec8a13cd2a.jpg">//m.sbmmt.com/;/a>"  c/>
</body>
</html>

Copier après la connexion

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 !