::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 层，我们可以利用它来实现半透明遮罩、模糊背景等视觉效果。
在
当使用原生
元素并调用showModal()时，模态框会阻断页面其他交互，并自动创建一个 ::backdrop 背景层。
立即学习“前端免费学习笔记（深入）”；
我们可以这样设置样式：
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.6);
}
dialog::backdrop {
backdrop-filter: blur(4px);
}
上面的代码会让模态框背后出现一个半透明黑色遮罩，或者加上毛玻璃模糊效果，提升用户体验。
与传统遮罩层对比的优势
以往实现模态框遮罩需要添加一个额外的 div（如
相关文章
css 如何设置链接不同状态的颜色_link visited hover active 伪类
css 页面首屏闪烁怎么解决_使用 link 提前加载关键样式
css视觉上需要做强调的局部颜色怎么办_使用css变量动态注入强调色
css 如何控制文字大小不影响布局_font-size 与 line-height 配合使用
css 选择器命中不准确怎么办_避免使用过深的后代选择器
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
更多热门AI工具
