::backdrop

翻译不完整。 请帮助我们翻译这篇文章!

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

::backdrop CSS 伪元素 是在任何处于全屏模式的元素下的即刻渲染的盒子(并且在所有其他在堆中的层级更低的元素之上)。

/* Backdrop 只有通过 dialog.showModal() 打开对话框时会被显示 */
dialog::backdrop {
  background: rgba(255,0,0,.25);
}

所有处于全屏模式下的元素都被放在顶级渲染层中的一个后进先出(LIFO)栈里。在视区内容被绘制在屏幕上之前,这一特殊的渲染层总是最后被渲染(因此是最上层)。当一个元素在这个栈的栈顶时,::backdrop 伪元素允许我们遮盖,装饰或完全隐藏该元素的下层文档。

::backdrop 不继承任何元素,同时也不被任何元素继承。没有规定什么属性不能应用于该伪元素。

语法

::backdrop

示例

在示例中,backdrop 样式用于将视频全屏显示时的背景颜色改为蓝灰色而不是大多数浏览器默认的黑色。

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

效果如下:

注意当 backdrop 可见时,上下两部分的暗蓝灰色的信箱效果。这个区域一般是黑色的,但上面的 CSS 语句修改了它的外观。

You can see this example in action or view or remix the code on Glitch.

规范

规范 状态 备注
Fullscreen API
::backdrop
Living Standard Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
::backdropChrome Full support 37
Full support 37
Full support 32
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Prefixed
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox Full support 47IE Full support 11
Prefixed
Full support 11
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 24
Full support 24
Full support 19
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari No support NoWebView Android Full support 37
Full support 37
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 37
Full support 37
Full support 32
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 47Opera Android Full support 24
Full support 24
Full support 19
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS No support NoSamsung Internet Android Full support 3.0
Full support 3.0
Full support 2.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Support on dialog elementsChrome Full support 32Edge Full support 79Firefox No support NoIE No support NoOpera Full support 19Safari No support NoWebView Android Full support ≤37Chrome Android Full support 32Firefox Android No support NoOpera Android Full support 19Safari iOS No support NoSamsung Internet Android Full support 2.0
Fullscreen supportChrome No support NoEdge No support 12 — 79Firefox Full support 47IE Full support 11Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 47Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

参见