背景フィルタで OS 風の背景を作成する

要素の背後のぼかしや色の変化。

Adam Argyle
Joe Medley
Joe Medley
GitHub
背景コンテンツのコンテキストを維持しながら、奥行きを作り出すには、半透明やぼかしなどのエフェクトが便利です。フロストガラス、動画オーバーレイ、半透明ナビゲーション ヘッダー、不適切な画像検閲、画像の読み込みなど、さまざまなユースケースをサポートします。これらの影響は、Windows 10 と iOS という 2 つの一般的なオペレーティング システムでお気づきでしょう。

すりガラス効果の例。
すりガラスの効果の例。ソース。

従来、こうした手法はウェブに実装するのは難しく、ハッキングや回避策も必要ありませんでした。近年、Safari と Edge はどちらも、background-filter（あるいは -webkit-backdrop-filter）プロパティを通じてこれらの機能を提供しています。このプロパティは、フィルタ関数に基づいて前景色と背景色を動的にブレンドします。Chrome のバージョン 76 以降、background-filter がサポートされるようになりました。

backdrop-filter のフィルタ関数のデモンストレーション。CodePen の例をお試しください。

ブラウザ サポート

対応ブラウザ

  • 76
  • 79
  • 103
  • 9

ソース

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 つの要素に 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 プロパティは、blur()、brightness()、contrast()、opacity()、drop-shadow() など、お好みのフィルタ関数がすべてサポートされている点で、CSS フィルタに似ています。また、フィルタとして外部画像を使用する場合は url() 関数、キーワード none、inherit、initial、unset もサポートされます。これらすべての項目については、MDN に構文、フィルタ、値の説明などが記載されています。

backdrop-filter が none 以外に設定されている場合、ブラウザは新しいスタッキング コンテキストを作成します。要素に絶対位置と固定位置の子孫がある場合に限り、包含ブロックを作成することもできます。

複数のフィルタを組み合わせて豊かで巧みな効果を実現したり、1 つのフィルタだけを使用して繊細な効果や精密な効果を実現したりできます。SVG フィルタと組み合わせることもできます。

例

これまでオペレーティング システム用に予約されていたデザインの手法やスタイルは、1 つの CSS 宣言だけで高いパフォーマンスを発揮し、実現できるようになりました。例をいくつか見てみましょう。

単一のフィルタ

次の例では、色とぼかしを組み合わせることでつや消し効果を実現しています。ぼかしは backdrop-filter により提供され、色は要素の半透明の背景色から取得されます。

.blur-behind-me {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(.5rem);
}
CodePen でこの例を試してみてください。

複数のフィルタ

目的とする結果を得るには、複数のフィルタが必要になる場合があります。これを行うには、フィルタのリストをスペースで区切って指定します。次に例を示します。

.brighten-saturate-and-blur-behind-me {
  backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}

次の例では、4 つのペインのそれぞれに背景フィルタの組み合わせが異なり、同じシェイプのセットがそれぞれのペインの背後にアニメーション化されています。

CodePen でこの例を試してみてください。

オーバーレイ

この例では、半透明の背景をぼかして、ページの背景とスタイル的にブレンドしながら、テキストを読みやすくする方法を示しています。

.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;
}
Codrops に掲載された Chen Hui Jing の例をお試しください。

おわりに

過去数年間で 560 人以上のユーザーが Chromium のバグに賛成票を投じており、待望の CSS 機能であることを明確に示しています。Chrome のバージョン 76 の backdrop-filter では、ウェブにおいて OS のような UI 表示に一歩近づきました。

補足資料