CSS ::backdrop伪元素的用法（附带实例）

大家平时注意观察，会发现在一些弹框、全屏效果或者视频中，会出现黑色或者半透明黑色的蒙层，这个蒙层就可以使用 ::backdrop 伪元素进行样式设置。

以弹框为例，如果设置如下的 CSS 属性，那么 Chrome 浏览器下默认 10% 的黑色半透明层的颜色就会深很多：

dialog::backdrop {
    background: #000a;
}

效果如下图所示：


又如图像元素的全屏显示效果，现在设置如下 CSS 属性后，原本纯黑色的蒙层就变成了黑色半透明：

img::backdrop {
    background: #000a;
}

效果如下图所示：


再如视频元素的全屏显示效果，设置如下 CSS 属性后，也不再是浏览器默认的纯黑色，而是黑色半透明：

video::backdrop {
    background: #000a;
}

效果如下图所示：


::backdrop 伪元素的兼容性相当好，不仅被所有现代浏览器支持，甚至被 IE11 浏览器支持（需要加 -ms- 私有前缀），大家可以放心使用。