::backdrop 是 css 伪元素，用于在全屏或模态对话框时创建背景遮罩层。当元素调用 requestfullscreen() 或 dialog 调用 showmodal() 时，浏览器自动生成 ::backdrop，可样式化实现半透明或模糊效果。相比传统需额外 div 的遮罩方案，::backdrop 无需冗余 html，样式与行为绑定更紧密，支持 backdrop-filter 等现代特性。主流浏览器支持良好，但 safari 较晚支持，需考虑降级方案。可用 @supports 进行特性检测以增强兼容性。合理使用 ::backdrop 可提升模态交互视觉体验。
在使用全屏或模态对话框时，::backdrop 伪元素可以帮助我们更好地控制模态内容背后的视觉层。它常用于
fullscreen元素或通过
dialog元素的
:modal状态来展示背景遮罩效果，而无需额外的 HTML 元素。
什么是 ::backdrop 伪元素？
::backdrop 是一个 CSS 伪元素，它会在元素进入“顶层”显示模式时自动生成，比如：
- 元素调用
requestFullscreen()
进入全屏模式 <dialog>
元素被showModal()
方法打开（处于模态状态）
此时，浏览器会自动在该元素背后插入一个可样式化的 ::backdrop 层，我们可以利用它来实现半透明遮罩、模糊背景等视觉效果。
在
当使用原生
<dialog>元素并调用
showModal()时，模态框会阻断页面其他交互，并自动创建一个 ::backdrop 背景层。
立即学习“前端免费学习笔记（深入）”；
我们可以这样设置样式：
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.6);
}
dialog::backdrop {
backdrop-filter: blur(4px);
}
上面的代码会让模态框背后出现一个半透明黑色遮罩，或者加上毛玻璃模糊效果，提升用户体验。
与传统遮罩层对比的优势
以往实现模态框遮罩需要添加一个额外的 div（如
<div class="modal-overlay">），但现在使用 ::backdrop 有以下好处：
- 无需额外标签，结构更简洁
- 样式与模态行为天然绑定，不会出现忘记移除遮罩的问题
- 支持现代 CSS 特性如
backdrop-filter
- 在全屏视频或画中画场景中也能统一处理背景
兼容性与注意事项
::backdrop 目前在主流现代浏览器中支持良好，但需注意：
- Safari 对
<dialog>
和 ::backdrop 的支持较晚，需确认版本 - 不支持的浏览器会忽略该样式，建议保留降级方案（如手动遮罩）
- 只能用于特定上下文：全屏元素或模态 dialog
可以结合特性检测使用：
@supports (selector(::backdrop)) {dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
}
}
基本上就这些。合理使用 ::backdrop 能让模态交互更轻量、视觉更现代，是现代前端开发中值得掌握的小技巧。
