-webkit-filter とは?_html/css_WEB-ITnose

これらのフィルター効果は元々 SVG で使用されていましたが、W3C がそれを CSS に導入し、その後 CSS Filter Effects 1.0 を策定し、今では Webkit が最初にそれをサポートしています。

仕様で現在サポートされている効果は次のとおりです:

- グレースケール

- セピア

- 彩度

- 色相回転

- 反転

-透明度

- 明るさ

- コントラストコントラスト

- ぼかし

- ドロップシャドウ シャドウ

そうですね、それらのいくつかは CSS3 で繰り返されますが、それらの使用方法は特定の状況に依存します 少なくとも、同じ効果を達成するためにさまざまな方法を使用できます。 - 透明度など。

使用法は標準的な CSS の記述です:

-webkit-filter: Blur(2px); 元の画像:

-webkit-filter:none;

グレースケール:

-WebKit -filter: グレースケール 50%;

ぼかし:

- webkit-filter: Blur(3px); これはぼかしレベル 3px です

-WebKit-filter :セピア（ 0.5); 50% 茶色

明るさ:

-webkit-filter: 明るさ (5); 50% 明るさ

色相:

-WebKit-filter:hue-rot食べました(180度)

反転:

- WebKit フィルター: invert (1);

コントラスト:

-WebKit -filter:contrast(1.4);