::backdrop仅对dialog.showModal()、video或img调用requestFullscreen()时生效，自定义全屏元素不触发；需用dialog::backdrop等精确选择器，且background-color为必需；Safari兼容性差，应检测CSS.supports('selector(::backdrop)')并降级。
::backdrop 只在模态上下文里生效，不是所有“全屏元素”都能用它——dialog 调用 showModal()、video 或 img 进入原生全屏（requestFullscreen()）时才自动创建该伪元素；其他自定义全屏（比如 div + fullscreen 类）完全不触发，别白费劲写样式。
为什么 ::backdrop 对你的全屏 div 没反应？
浏览器只对少数内置全屏行为生成 ::backdrop：原生 <dialog></dialog>（仅限 showModal()）、<video></video>、<img alt="怎么通过HTML的CSS的::backdrop伪元素为全屏元素设置半透明背景遮罩" > 全屏。你自己用 element.requestFullscreen() 触发的全屏，若元素不是上述三类之一，::backdrop 根本不会被创建——DevTools 里连节点都看不到。
- 错误做法：
div.fullscreen::backdrop { background: rgba(0,0,0,0.5); }→ 无效，选择器永远不匹配 - 正确前提：必须是
<video></video>或<img alt="怎么通过HTML的CSS的::backdrop伪元素为全屏元素设置半透明背景遮罩" >元素调用requestFullscreen()，或<dialog></dialog>调用showModal() - 检查方法：打开 DevTools → Elements 面板 → 展开
，搜索::backdrop；没出现就说明没触发
dialog::backdrop 半透明遮罩写法和常见坑
这是目前最可控的使用场景，但细节极容易翻车：
- 必须用
dialog.showModal()，dialog.show()或open属性赋值都不行 - 选择器必须带
dialog标签前缀：dialog::backdrop✅，.modal::backdrop❌（即使<dialog class="modal"></dialog>） -
background-color是刚需，不能只靠opacity：设background: #0008（即rgba(0,0,0,0.5)）最稳，渐变或图片背景在 Safari 中可能失效 -
z-index和pointer-events无效：它层级固定（总在<dialog></dialog>下、页面内容上），且默认pointer-events: none，无法拦截点击——真要防穿透，得额外加一层div.overlay
video 和 img 全屏时的 ::backdrop 行为差异
这两类元素的 ::backdrop 行为比 dialog 更“原始”，样式支持更少：
立即学习“前端免费学习笔记（深入）”；
-
video::backdrop和img::backdrop在 Chrome/Firefox/Edge 中可用，但 Safari 17.6 仍不支持（会回退到纯黑） - 只允许
background-color和opacity，backdrop-filter基本无效（Safari 不认，Chrome 部分版本渲染异常） - 无法控制尺寸或位置：它总是铺满整个视口，但若页面有
transform或filter祖先容器，遮罩可能被裁剪或错位 - 动画支持差：加
transition或@keyframes在 Firefox 中会被忽略，Chrome 也仅支持background-color渐变
兼容性差时怎么安全降级？
别赌浏览器支持，尤其当项目需覆盖 iOS/Safari 或旧安卓 WebView：
- 检测支持：
CSS.supports('selector(::backdrop)')，返回false就走 JS 方案 - JS fallback：插入一个
div.overlay，用getBoundingClientRect()动态计算位置，设position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999; - 毛玻璃效果别硬套
::backdrop：直接给<dialog></dialog>或全屏容器加backdrop-filter: blur(4px)+background: rgba(255,255,255,0.1)，再用@supports包裹，不支持时只留半透色 - 真正麻烦的是交互：原生
::backdrop不响应点击，降级层必须手动监听click并调用close()或exitFullscreen()
最常被忽略的一点：即使 ::backdrop 显示了，它也不保证盖住所有页面元素——position: fixed 的导航栏、第三方弹窗（如 Ant Design 的 message）很可能浮在它上面，因为它们的 z-index 被设得更高，而你又没法改 ::backdrop 的层级。
