filter()

概要

CSS画像に対して直接フィルター効果を適用できる関数です。filterプロパティとは異なり、要素全体ではなく特定の画像にのみ効果を限定できます。背景画像にぼかしやドロップシャドウを適用する場合などに有用です。ただし、ブラウザサポートは非常に限定的です。

対応ブラウザ

基本構文

.element {
  background: filter(
    url(image.png),
    blur(2px) brightness(1.2)
  );
}

実務での使いどころ

• 背景画像への個別フィルター適用

  複数の背景画像のうち特定の画像にのみぼかし効果を適用し、テキストの可読性を向上させます。

注意点

アクセシビリティ

• フィルター効果がテキストの可読性やコントラスト比に影響しないことを確認してください。

参考リンク

• MDN Web Docs — filter()
• Can I use — filter()