CSS3のfilter属性の詳しい紹介

今日は、CSS3 のフィルター属性 について詳しく説明します。これは非常に強力で、Web ページ上の 画像 に PS のような画像処理効果を実行できます。 CSS を操作して画像を処理できます。

ブラウザのサポート: フィルタ属性をサポートしていないのは

IE ブラウザ のみです。Safari および Google ブラウザの以前のバージョンと互換性を持たせるには、プレフィックス -webkit-

フィルタ属性を追加する必要があります。仕様は次のとおりです:

grayscale グレースケール (値は 0 ～ 1 の間の 10 進数です)

filter:grayscale(1); -webkit-filter:grayscale(1);

0 はグレースケールが 0 % であることを意味し、元の画像では、1 はグレースケールが 100% グレーであることを意味します。

セピアブラウン (値は 0 ～ 1 の間の 10 進数です)

filter:sepia(1); -webkit-filter:sepia(1);

0 は茶色度 0%、元の画像を表示することを意味します茶色レベルが 100% の場合は茶色を示します。

saturate 彩度 (値は num)

filter:saturate(1.8); -webkit-filter:saturate(1.8);

0 は彩度が 0 であることを意味し、画像は白黒で表示されます、0.5 は彩度が 0 であることを意味します元の画像の半分、1 は彩度が元の画像と同じであることを意味し、1 より大きい値は彩度が強調されていることを意味します。

hue-rotate 色相回転 (値は角度) angle deg

filter:hue-rotate(60deg); -webkit-filter:hue-rotate(60deg);

は色相回転の特定の角度を表します。

invert 反転 (値は 0 ～ 1 の 10 進数です)

filter:invert(1); -webkit-filter:invert(1);

0 は元の画像を反転しないことを意味し、1 は 100% 完全に反転することを意味します-色。

不透明度の透明度 (値は 0 ～ 1 の 10 進数です)

filter:opacity(0.5); -webkit-filter:opacity(0.5);

0 は完全に透明、0.5 は半透明、1 は 100% を意味します完全に不透明です。

b

rightness 明るさ (値は num)

filter:brightness(2); -webkit-filter:brightness(2);

0 は明るさが 0 で黒を表示することを意味し、0.5 は明るさが黒であることを意味します元の画像の半分、1 は元の画像の明るさを表し、1 より大きい値は強調された明るさを表します。

contrast コントラスト (値は num)

filter:contrast(1.8); -webkit-filter:contrast(1.8);

0 はコントラストが 0 (単色) であることを意味し、0.5 はコントラストが半分であることを意味します元の画像、1 は元の画像のコントラストです。値は 1 より大きく、値が大きいほどコントラストが強くなります。

blur ぼかし(値は長さ)

filter:blur(5px); -webkit-filter:blur(5px);

はぼかしの度合いのピクセル値を表します。

drop-shadow

filter:drop-shadow(0 0 10px #000); -webkit-filter:drop-shadow(0 0 10px #000);

は css3 box-shadow 属性値と一致します。

trans

m の複数属性の記述方法と同様に、複数の属性値を一緒に記述したり、スペースで区切ったりすることができます

これらの事例を読んだ後は、この方法を習得したと思います。 PHP 中国語 Web サイトの記事にある他の関連トピックにも注目してください。

関連書籍:

CSS を使用して画像の回転効果を作成する方法

HTML で背景色を表示できない問題の解決方法

HTML Web ページを最適化する方法

以上がCSS3のfilter属性の詳しい紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。