CSS3を使用して画像をグレーモードにする例-CSSチュートリアル-php.cn

CSS3を使用して画像をグレーモードにする例

高洛峰

リリース： 2017-03-02 15:41:41

オリジナル

1999 人が閲覧しました

この記事では、CSS3 を使用して画像をグレーモードに変換する方法を紹介します。実装が必要な友人は参照してください。

コード例:

コードは次のとおりです:

<!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>

ログイン後にコピー

概要
以上がこの記事の全内容です。PHP 中国語 Web サイトをご愛顧いただきありがとうございます。

CSS3 で画像をグレーモードに変換する例に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。