::backdrop

CSS の ::backdrop 擬似要素は、何らかの要素が全画面モード (top layer (en-US)) で表示される直下に直接表示される viewport の寸法のボックスです。

試してみましょう

構文

css

::backdrop {
  /* ... */
}

説明

Backdrop は以下の状況で現れます。

全画面モードで複数の要素が配置されたときは、それぞれに自身の ::backdrop 疑似要素があります。

css

/* backdrop はダイアログが dialog.showModal() が開いている時のみ表示されます */
dialog::backdrop {
  background: rgba(255, 0, 0, 0.25);
}

すべての全画面要素は、最上位レイヤー、すなわちビューポートで常にコンテンツが画面に描画される前に最後に (すなわち最上位に) 描画される特殊なレイヤーの中で、後入れ先出し (LIFO) で配置されます。::backdrop 擬似要素は、最上位レイヤーの一番上に来たときに、その下に位置するものをぼかしたり、スタイル付けしたり、完全に隠したりすることができます。

::backdrop 擬似要素はどの要素にも継承せず、どの要素からも継承しません。この擬似要素に適用するプロパティの制限はありません。

例

全画面動画の背景のスタイル付け

この例では、動画が全画面モードに移行したときの backdrop スタイルが、多くのブラウザーでの既定値である黒ではなく、青灰色に構成しています。

css

video::backdrop {
  background-color: #448;
}

結果の画面は以下のようになります。

ほぼ全画面のビデオプレイヤー。ビデオプレイヤーが完全に画面を覆わないので、プレイヤーの上下に紫が見える。

動作例を見てみてください。背景の色を変更した後、動画を全画面表示にすると、背景色の変更を確認することができます。

仕様書

Specification
CSS Positioned Layout Module Level 4
# backdrop

ブラウザーの互換性

BCD tables only load in the browser

関連情報