要素の背後のぼかしや色の変化。
半透明、ぼかし、その他のエフェクトは、背景コンテンツのコンテキストを維持しながら奥行きを生み出す有効な方法です。フロストガラス、動画オーバーレイ、半透明ナビゲーション ヘッダー、不適切な画像検閲、画像の読み込みなど、多くのユースケースをサポートします。この現象は、Windows 10 と iOS の 2 つの一般的なオペレーティング システムで見覚えがあるかもしれません。
従来、こうした手法はウェブで実装することが難しく、完璧とは言えないハッキングや回避策も必要とされていませんでした。近年、Safari と Edge はどちらも、フィルタ関数に基づいて前景色と背景色を動的に結合する background-filter
プロパティ(または -webkit-backdrop-filter
プロパティ)を通じてこれらの機能を提供しています。Chrome のバージョン 76 以降で background-filter
がサポートされるようになりました。
ブラウザ サポート
backdrop-filter
がサポートされていない場合は、パフォーマンス上の理由から、ポリフィルではなく画像にフォールバックしてください。以下の例は、その方法を示しています。
@supports (backdrop-filter: none) {
.background {
backdrop-filter: blur(10px);
}
}
@supports not (backdrop-filter: none) {
.background {
background-image: blurred-hero.png;
}
}
基本
backdrop-filter
プロパティは、要素に 1 つ以上のフィルタを適用して、要素の背後にある外観を変更します。- オーバーレイする要素は、少なくとも部分的に透明である必要があります。
- オーバーレイする要素は、新しいスタッキング コンテキストを取得します。
CSS backdrop-filter
は、半透明または透明の要素に 1 つ以上の効果を適用します。以下の画像をご覧ください。
.frosty-glass-pane { backdrop-filter: blur(2px); }
.frosty-glass-pane { opacity: .9; backdrop-filter: blur(2px); }
左側の画像は、backdrop-filter
が使用またはサポートされていない場合に重なり合った要素がどのようにレンダリングされるかを示しています。右の画像では、backdrop-filter
を使用してぼかし効果を適用しています。backdrop-filter
に加えて opacity
を使用していることに注意してください。opacity
なしでは、ぼかしを適用する対象がありません。opacity
を 1
(完全に不透明)に設定すれば、背景には何も影響を与えないことは言うまでもありません。
backdrop-filter
プロパティは CSS フィルタに似ていますが、お気に入りのフィルタ関数(blur()
、brightness()
、contrast()
、opacity()
、drop-shadow()
など)がすべてサポートされています。フィルタとして外部画像を使用する場合の url()
関数や、キーワード none
、inherit
、initial
、unset
もサポートされます。構文、フィルタ、値などについては、すべて MDN で説明をご覧いただけます。
backdrop-filter
が none
以外に設定されている場合、ブラウザは新しいスタッキング コンテキストを作成します。要素に絶対位置と固定位置の子孫がある場合、包含ブロックを作成することもできます。
フィルタを組み合わせてリッチで高度な効果を実現したり、1 つのフィルタを使用してより繊細で正確な効果を実現したりできます。SVG フィルタと組み合わせることもできます。
例
これまでオペレーティング システム向けに確保されていたデザイン手法やスタイルを、単一の CSS 宣言で高いパフォーマンスと実現性を実現できるようになりました。例をいくつか見てみましょう。
単一のフィルタ
次の例では、色とぼかしを組み合わせてフロスト効果を実現しています。ぼかしは backdrop-filter
によって提供されますが、色は要素の半透明の背景色から指定されます。
.blur-behind-me {
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(.5rem);
}
複数のフィルタ
目的とする効果を得るために、複数のフィルタが必要になる場合があります。その場合は、フィルタのリストをスペースで区切って指定します。次に例を示します。
.brighten-saturate-and-blur-behind-me {
backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}
次の例では、4 つのペインのそれぞれに背景フィルタの組み合わせが異なり、同じ図形のセットが背後でアニメーション化されています。
オーバーレイ
この例では、半透明の背景をぼかして、ページの背景とスタイルを調和させながらテキストを読みやすくする方法を示しています。
.modal {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5);
}
動的な背景でのテキストのコントラスト
前述のように、backdrop-filter
を使用すると、ウェブでは難しい、あるいは不可能なパフォーマンス効果を実現できます。たとえば、アニメーションに応じて背景を変更する場合です。この例では、backdrop-filter
により、テキストの背後の状態にもかかわらず、テキストと背景の高コントラストが維持されます。デフォルトの背景色 darkslategray
で始まり、backdrop-filter
を使用して変換後の色が反転します。
.container::before {
z-index: 1;
background-color: darkslategray;
filter: invert(1);
}
.container::after {
backdrop-filter: invert(1);
z-index: 3;
}
まとめ
過去数年間で 560 人以上が Chromium のバグに賛成票を投じており、これが待望の CSS 機能であることは明らかです。Chrome バージョン 76 の backdrop-filter
のリリースにより、真の OS ライクな UI 表示にさらに一歩近づきます。