Question 1

利用可能なCSSフィルター関数は何ですか？

Accepted Answer

CSSフィルターはblur、brightness、contrast、grayscale、hue-rotate、invert、opacity、saturate、sepiaをサポートします。1つのfilterプロパティに複数のフィルターを組み合わせることができ、記載された順に適用されます。

Question 2

CSSフィルタープロパティはパフォーマンスに影響しますか？

Accepted Answer

CSSフィルターは現代のブラウザでGPUアクセラレーションされますが、強いblurや複数のフィルターの重ね合わせは特にモバイルでレンダリングパフォーマンスに影響することがあります。アニメーションにはwill-change: filterを使ってブラウザの最適化を促してください。

Question 3

背景だけにCSSフィルターを適用できますか（子要素を除く）？

Accepted Answer

いいえ。filterプロパティは子要素を含む要素全体に適用されます。背景だけをフィルタリングするには、グラスモーフィズム効果のためのbackdrop-filterを使うか、別の疑似要素に背景を分離してください。

Question 4

filter: opacity()とopacityプロパティの違いは何ですか？

Accepted Answer

どちらも透明度を制御しますが、filter: opacity()はハードウェアアクセラレーションを使用し、他のfilter関数と組み合わせられます。opacityプロパティはよりシンプルで新しいスタッキングコンテキストを作ります。単独の透明度にはopacityプロパティが通常好まれます。

Question 5

CSSフィルターはSVG要素にも使えますか？

Accepted Answer

はい。CSSフィルターはHTML要素と同様にSVG要素にも適用されます。またSVGにはCSSフィルターのショートカットより細かい制御を提供する独自のフィルタープリミティブ(feBlur、feColorMatrixなど)があります。

CSSフィルタージェネレーター

よくある質問