CSS の ::backdrop疑似要素 は、 全画面モード で描画される何らかの要素のすぐ下層（スタック内で下層に要素が存在する場合は、それより上層）に描画されるボックスです。
dialog::backdrop {
background: rgba(255,0,0,.25);
}
全画面要素はトップレイヤー のスタックの一部で、すなわち他のあらゆるコンテンツの前に描画されます。 ::backdrop 疑似要素は下の要素にスタイルを適用したり隠したりすることができます。
::backdrop 疑似要素はどの要素にも継承せず、どの要素からも継承しません。この疑似要素に適用するプロパティの制限はありません。
構文
::backdrop
仕様書
ブラウザー実装状況
機能 Chrome Edge Firefox Internet Explorer Opera Safari 基本対応 37
32
-webkit-
あり
-ms-
47 11
-ms-
なし
なし Support on dialog elements 32
なし
なし
なし
なし
なし Fullscreen support
なし
あり 47 11
なし
なし
機能 Android webview Chrome for Android Edge mobile Firefox for Android Opera Android iOS Safari Samsung Internet 基本対応
なし
?
あり
-ms-
47
なし
なし
? Support on dialog elements
なし
?
なし
なし
なし
なし
? Fullscreen support
なし
?
あり 47
なし
なし
なし
デスクトップ モバイル Chrome Edge Firefox Internet Explorer Opera Safari Android webview Android 版 Chrome Edge Mobile Android 版 Firefox Android 版 Opera iOS 版 Safari Samsung Internet 基本対応
完全対応
37
完全対応
37
完全対応
32接頭辞付き
完全対応
あり
完全対応
あり接頭辞付き
完全対応
47
完全対応
11
完全対応
11接頭辞付き
未対応
なし
未対応
なし
未対応
なし
?
完全対応
あり
完全対応
あり接頭辞付き
完全対応
47
未対応
なし
未対応
なし
?
Support on dialog elements
完全対応
32
未対応
なし
未対応
なし
未対応
なし
未対応
なし
未対応
なし
未対応
なし
?
未対応
なし
未対応
なし
未対応
なし
未対応
なし
?
Fullscreen support
未対応
なし
完全対応
あり
完全対応
47
完全対応
11
未対応
なし
未対応
なし
未対応
なし
?
完全対応
あり
完全対応
47
未対応
なし
未対応
なし
未対応
なし
凡例
完全対応
完全対応
未対応
未対応
実装状況不明
実装状況不明 実験的。動作が変更される可能性があります。 実験的。動作が変更される可能性があります。 使用するには、ベンダー接頭辞または異なる名前が必要です。 使用するには、ベンダー接頭辞または異なる名前が必要です。
関連情報
ドキュメントのタグと貢献者
最終更新者:
mfuji09 ,
2018/02/03 20:53:57