filter()
CSS画像に対して直接フィルター効果を適用できる関数です。filterプロパティとは異なり、要素全体ではなく特定の画像にのみ効果を限定できます。背景画像にぼかしやドロップシャドウを適用する場合などに有用です。ただし、ブラウザサポートは非常に限定的です。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.types.image.filter | | | | 9.1 | | 9.3 |
注釈 2件
削除済み
- このバージョンで機能が削除されました (9.1)
対応条件
- ベンダープレフィックス付きで対応: -webkit- (9)
注釈 2件
削除済み
- このバージョンで機能が削除されました (9.3)
対応条件
- ベンダープレフィックス付きで対応: -webkit- (9)
基本構文
CSS
.element {
background: filter(
url(image.png),
blur(2px) brightness(1.2)
);
}ライブデモ
実務での使いどころ
-
背景画像への個別フィルター適用
複数の背景画像のうち特定の画像にのみぼかし効果を適用し、テキストの可読性を向上させます。
注意点
- Safariのみ対応のため、backdrop-filterやfilterプロパティなど代替手段をフォールバックとして用意してください。
アクセシビリティ
- フィルター効果がテキストの可読性やコントラスト比に影響しないことを確認してください。