CSSフィルター効果：CSSのぼやけ、グレースケール、明るさなど！

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

CSSフィルター効果の例 最初はSVG仕様の一部であるCSSフィルターは、画像レンダリングを操作するための強力でユーザーフレンドリーな方法を提供します。 現在CSSに統合されているこれらのフィルターは、ぼやけ、明るく、飽和調整などを可能にします。 それらは個別にまたは組み合わせて使用​​でき、多用途の視覚効果を提供します。 基本的な構文は簡単です：

キーフィルターを調べてみましょう：

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

重要な概念：

cssフィルター

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

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

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

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

• グレイスケール：画像をグレースケールに変換します。 値は0％（効果なし）から100％（完全なグレースケール）の範囲です。 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を適用します。 半径（ピクセル単位）は、ぼやけの強度を決定します。 filter: invert(100%);

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

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

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

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

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

追加のメモ：

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

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

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

よくある質問：

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

以上がCSSフィルター効果：CSSのぼやけ、グレースケール、明るさなど！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。