::backdrop 是 CSS 伪元素，用于在全屏或模态对话框时创建背景遮罩层。当元素调用 requestFullscreen() 或 dialog 调用 showModal() 时，浏览器自动生成 ::backdrop，可样式化实现半透明或模糊效果。相比传统需额外 div 的遮罩方案，::backdrop 无需冗余 HTML，样式与行为绑定更紧密，支持 backdrop-filter 等现代特性。主流浏览器支持良好，但 Safari 较晚支持，需考虑降级方案。可用 @supports 进行特性检测以增强兼容性。合理使用 ::backdrop 可提升模态交互视觉体验。
在使用全屏或模态对话框时，::backdrop 伪元素可以帮助我们更好地控制模态内容背后的视觉层。它常用于
fullscreen
元素或通过
dialog
元素的
:modal
状态来展示背景遮罩效果，而无需额外的 HTML 元素。
什么是 ::backdrop 伪元素？
::backdrop 是一个 CSS 伪元素，它会在元素进入“顶层”显示模式时自动生成，比如：
元素调用
requestFullscreen()
进入全屏模式
元素被
showModal()
方法打开（处于模态状态）
此时，浏览器会自动在该元素背后插入一个可样式化的 ::backdrop 层，我们可以利用它来实现半透明遮罩、模糊背景等视觉效果。
在 模态框中使用 ::backdrop
当使用原生
元素并调用
showModal()
时，模态框会阻断页面其他交互，并自动创建一个 ::backdrop 背景层。
立即学习“前端免费学习笔记（深入）”；
我们可以这样设置样式：
九歌
九歌–人工智能诗歌写作系统
322 查看详情 
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.6);
}
dialog::backdrop {
backdrop-filter: blur(4px);
}
上面的代码会让模态框背后出现一个半透明黑色遮罩，或者加上毛玻璃模糊效果，提升用户体验。
与传统遮罩层对比的优势
以往实现模态框遮罩需要添加一个额外的 div（如
赞 (0)打赏微信扫一扫
支付宝扫一扫
