CSSフィルター：畫像操作の包括的なガイド

キーフィルターを調(diào)べてみましょう：

filter: <filter-function> [<filter-function>]* | none;

重要な概念：

cssフィルター

ディスプレイの前に要素レンダリングを変更し、効率的な畫像操作を提供します。 彼らは、幅広いブラウザのサポートを誇り、多様な効果（ぼやけ、明るさ、コントラスト、ドロップシャドウ、グレースケール、色相、反転、不透明、飽和、セピア）を促進(jìn)します。

フィルターを組み合わせてアニメーション化することができます。 アプリケーションの順序は最終結(jié)果に影響を與え、一部のフィルターは潛在的に他のフィルターをオーバーライドする可能性があります。 それらは、畫像、ビデオ、iframesなどのさまざまな要素に適用されます。
• 通常はパフォーマンスがありますが、ハードウェアアクセラレーションがなければフィルターは遅くなる可能性があります。 フィルター性能は、適用されたSVGフィルターに依存します。 主要なブラウザは
プロパティをサポートしていますが、インターネットエクスプローラーは例外です。
• 個(gè)々のフィルター関數(shù)：blururl() filter

明るさ：畫像の輝度を制御します。 値以上の値を受け入れます。 0％は黒、100％はオリジナル、Values＆GT;明るさを100％増加させます。

• コントラスト：畫像のコントラストを調(diào)整します。 値≥0; 0％がグレースケールの畫像になり、100％がオリジナルで、値が高くなるコントラストが増加します。 filter: brightness(300%);

• グレイスケール：畫像をグレースケールに変換します。 値は0％（効果なし）から100％（完全なグレースケール）の範(fàn)囲です。 filter: contrast(0%);

• 飽和：色の飽和を制御します。 0％はすべての色を削除し、100％がオリジナルで、Values＆GT; 100％超飽和。 filter: grayscale(100%);

• sepia：セピアトーンを適用します。 0％はオリジナル、100％は完全にセピアです。 filter: saturate(0%);

• フエrotate：畫像の色合いを回転させます。 0DEGは変更されていません。値とgt; 360DEGラップアラウンド。 filter: sepia(100%);

• 反転：イメージカラーを反転させます。 0％には効果がなく、100％完全に反転します。 filter: hue-rotate(90deg);

• Blur： Gaussian Blurを適用します。 半徑（ピクセル?yún)g位）は、ぼやけの強(qiáng)度を決定します。 filter: invert(100%);

• 不透明度：透明性を制御します。 0％は完全に透明で、100％は不透明です。 filter: opacity(75%);

• ドロップシャドウ：ドロップシャドウを追加します。 XおよびYのオフセット、色、およびオプションでぼやけた半徑が必要です。 filter: drop-shadow(5px 5px 10px #666);

• url（）：カスタムSVGフィルターの使用を許可します。 SVGフィルターのIDを參照してください。 パフォーマンスは、SVGフィルターに基づいて異なります

フィルターの組み合わせとアニメーション：

複數(shù)のフィルターを組み合わせることができます。一部のフィルターが他のフィルターをオーバーライドするため、注文することが重要です。 アニメーションは、CSS遷移またはアニメーションを使用して動(dòng)的効果を作成します

追加のメモ：

フィルターは、要素のすべての部分（背景、境界、テキスト）に影響します。 ビデオやIFRAMEに適用できます。 パフォーマンスは一般的に良好ですが、

（ハードウェアアクセラレーションなし）および

（SVGフィルターに依存）を除きます。 ブラウザのサポートは、インターネットエクスプローラーを除く優(yōu)れています。blur url()

よくある質(zhì)問：

このセクションには、元のテキストに記載されているFAQへの回答が含まれ、明確さと簡(jiǎn)潔さのために言い換えられます。 スペースの制約のため、ここでは省略しますが、最終的な洗練された記事への貴重な追加になります。

以上がCSSフィルター効果：CSSのぼやけ、グレースケール、明るさなど！の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。