CSS3 実践開発: CSS3 を使用して photoshop_html/css_WEB-ITnose のフィルタリング効果を実現する-htmlチュートリアル-php.cn

CSS3 実践開発: CSS3 を使用して photoshop_html/css_WEB-ITnose のフィルタリング効果を実現する

WBOY

リリース： 2016-06-24 11:59:29

オリジナル

1375 人が閲覧しました

Photoshop を使用して画像の明るさやコントラストを調整したり、画像をグレースケールに変換したりするのは非常に一般的な機能であることは承知しています。今日はいくつかの新機能を紹介します。CSS を使用して Web 画像に同じ効果を追加します。

まずWebページに画像を表示します。HTMLコードは次のとおりです:

<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="stylesheet" href="styles.css" media="screen"><title>CSS3实战开发:使用CSS3实现photoshop的过滤效果</title></head><body><img src="20140821.jpg"  width="800" /></body></html>

ログイン後にコピー

このときのランニング効果図は次のとおりです:

次に、対応する機能を紹介します。、スタイリング後の画像フィルタリングの適用を示します。

1. 画像のグレースケールを調整します: グレースケール、範囲は 0% ～ 100% です。アプリケーションのスタイルコードは次のとおりです:

img {       -webkit-filter: grayscale(100%);  }

ログイン後にコピー

このときのページ効果は次のとおりです:

2. 画像にダークブラウンの効果を適用します: セピア、範囲は 0 ～ 100% 構文コード

img {       -webkit-filter: sepia(100%);  }

ログイン後にコピー

This ページを実行すると、効果は次のようになります:

3. 画像の露出を調整します: 明るさ、範囲 0% ～ 100%、構文コードは次のとおりです。

img {      -webkit-filter: brightness(40%);   }

ログイン後にコピー

ページを実行すると、効果は次のようになります:

4. 画像のコントラストを調整します。contrast、構文コードは次のとおりです:

img {      -webkit-filter: contrast(500%);   }

ログイン後にコピー

効果は次のとおりです

最後に、ぼかし効果を紹介します。blur、構文コードは次のとおりです:

img {      -webkit-filter: blur(2px);   }

ログイン後にコピー

このときのページ効果は次のとおりです:

もちろん、上記の機能は同時に使用できます。たとえば、マウスを画像の上に移動すると、画像が灰色になり、画像がぼやけます。コードは次のとおりです。

img:hover {      -webkit-filter:grayscale(100%) blur(2px);   }

ログイン後にコピー

このページの効果は次のとおりです。 :

CSS 機能を使用して Photoshop のフィルタリング機能を完成させるのはとても簡単であることがわかりました。