ホームページ > 記事 > ウェブフロントエンド > CSS3フィルター属性の詳しい説明
CSS3フィルター属性の詳しい説明
- php中世界最好的语言オリジナル
- 2018-03-21 17:02:082114ブラウズ
今回は、CSS3 フィルター 属性 と、CSS3 フィルター 属性 を使用する際の 注意事項 について詳しく説明します。実際のケースを見てみましょう。
最近、ウェブサイトを構築する過程で、フィルター属性という非常に強力な CSS3 属性を発見しました。P ピクチャーが好きな友人なら、名前を見ればこのアーティファクトが何であるかわかるはずです。もちろん、この属性の効果はPSの比ではありませんが、うまく使えばスペースを節約しながら1枚の絵を2枚分の効果にすることができます。
1. 定義
フィルタ、文字通りフィルタを意味します。例を挙げると、公式に定義されたフィルタ属性は、要素（通常は<style>
img{
/*灰度100%*/
-webkit-filter:grayscale(100%);
}
</style>
<img src="img/boke.png" alt="">
2. 構文: なし | 色相反転() | | opacity() | sepia() url(); ご覧のとおり、属性には何を意味しますか?
セピアブラウン(レトロな古い写真の雰囲気)
saturate
hue-rotate色相回転
-
invert反転
-
不透明度
-
明るさ明るさ
コントラスト
ぼかし
ドロップシャドウ
- 例:
-
ここで使用されるセピア調整
<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>example
：
以下に、フィルター属性のいくつかの値の例を示します。その他の興味深いものがある場合は、私と共有してください。 1)hue-rotate(色の回転)
効果は写真に示されています。具体的な効果は皆さん次第です。 Blur (ぼかし効果、単位 px) <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>サンプル画像:
(3) invert invert
invert invert は画像をネガのように見せます。これ以上言っても無駄です。コードを見てください。 :
<style>
.img{
-webkit-filter:blur(1px);
}
</style>
<body>
<img src="img/boke.png" alt="">
<img class="img" src="img/boke.png" alt="">
</body>
例の写真:
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
CSS でテキスト省略をカスタマイズする方法
以上がCSS3フィルター属性の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。