CSS::backdrop 疑似要素は、何らかの要素が全画面モードで表示される直下に直接表示される viewport の寸法のボックスです。これは Fullscreen API を使用した全画面モードに配置される要素、および <dialog> 要素の両方を含みます。

全画面モードで複数の要素が配置されたときは、 backdrop はそのような要素の最上位の直下、より古い全画面要素の上に絵が描かれます。

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

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

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

構文

::backdrop

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

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

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

なお、 backdrop である暗い青灰色の上下のレターボックス効果の場所は可視です。ふつうその領域は黒ですが、上記の CSS によって表示方法が変更されています。

Glitchすぐに例を見るまたはコードを閲覧またはリミックスすることができます。

仕様書

仕様書 状態 備考
Fullscreen API
::backdrop の定義
現行の標準 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 完全対応 37
完全対応 37
完全対応 32
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox 完全対応 47IE 完全対応 11
接頭辞付き
完全対応 11
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox Android 完全対応 47Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android ?
Support on dialog elements
実験的
Chrome 完全対応 32Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android ?
Fullscreen support
実験的
Chrome 未対応 なしEdge 完全対応 ありFirefox 完全対応 47IE 完全対応 11Opera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 47Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss
最終更新者: mfuji09,