これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

CSS::backdrop 疑似要素は、 全画面モードで描画される何らかの要素のすぐ下層(スタック内で下層に要素が存在する場合は、それより上層)に描画されるボックスです。

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

全画面要素はトップレイヤーのスタックの一部で、すなわち他のあらゆるコンテンツの前に描画されます。 ::backdrop 疑似要素は下の要素にスタイルを適用したり隠したりすることができます。

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

構文

::backdrop

仕様書

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

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

37

32 -webkit-

あり -ms- 4711 -ms- なし なし
Support on dialog elements32 なし なし なし なし なし
Fullscreen support なし あり4711 なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 なし ? あり -ms- 47 なし なし ?
Support on dialog elements なし ? なし なし なし なし ?
Fullscreen support なし ? あり47 なし なし なし

関連情報

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

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