コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS3を使用して画像をグレーモードにする例

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

高洛峰
リリース： 2017-03-02 15:41:41
オリジナル
2046 人が閲覧しました

この記事では、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">//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>
ログイン後にコピー

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

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


関連ラベル：
css3 写真 グレー
ソース：php.cn
前の記事：CSS3ボタンマウスホバーにより絞り効果を実現 次の記事：CSS 処理の水平方向のセンタリングに関する簡単な説明
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート