ホームページ > 記事 > ウェブフロントエンド > CSS3 のフィルター属性の概要
CSS3 のフィルター属性の概要
- 不言オリジナル
- 2018-07-02 10:11:481490ブラウズ
この記事では、CSS3 の強力なフィルター属性に関する関連情報を主に紹介します。必要な友人は参照してください。
ブロガーは最近、Web サイトを構築する過程で非常に強力な CSS3 属性であるフィルター (フィルター) 属性を発見しました。 P ピクチャが好きな友人は、名前を見ればこれがどのようなアーティファクトであるかわかるはずです。もちろん、この属性の効果はPSの比ではありませんが、うまく使えばスペースを節約しながら1枚の絵を2枚分の効果にすることができます。
1. 定義
フィルター、文字通りフィルターを意味します。正式に定義されたフィルター属性は、要素（通常はa1f02c36ba31691bcfe87b2722de723b）の視覚効果を定義します。
2. 構文フィルター: なし| saturate() | sepia() url();
ご覧のとおり、属性には多くのオプションの値があります。 グレースケール- セピアブラウン(レトロな古い写真の雰囲気)
- saturate
- hue-rotate色相回転
- invert反転
-
不透明度 透明度 - 明るさ 明るさ
- コントラスト
- ぼかし
- ドロップシャドウ
- 例:
ここで使用されるセピア調整
<style>
img{
/*灰度100%*/
-webkit-filter:grayscale(100%);
}
</style>
<img src="img/boke.png" alt="">サンプル画像:
以下に、フィルター属性のいくつかの値の例を示します。他の興味深いものがある場合は、私と共有してください
(1) 色相。 - 回転 (色の回転)
効果は写真に示されています。具体的な効果は皆さん次第です。 (ぼかし効果、単位 px)
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.img{
-webkit-filter:sepia(70%);
}
</style>
</head>
<body>
<img src="img/boke.png" alt="">
<img class="img" src="img/boke.png" alt="">
</body>サンプル画像:
(3) invert invert
invert は画像をネガのように見せます。これ以上言っても無駄です。コードを見てください。
<style>
.img{
-webkit-filter:hue-rotate(330deg);
}
</style>
</head>
<body>
<img src="img/boke.png" alt="">
<img class="img" src="img/boke.png" alt="">
</body> サンプル写真:
以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
CSS3 のアニメーション属性のトランスフォームおよびトランジションとアニメーション属性の違いの分析
以上がCSS3 のフィルター属性の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。