dialog::backdrop 样式没生效，根本原因是未调用 showModal()；show()、open 属性或 HTML 中写 open 均不生成 backdrop；必须用 dialog::backdrop 选择器并确保 JS 调用 showModal()。
dialog::backdrop 样式没生效？先看 JS 是否调用了 showModal()
绝大多数“遮罩不显示”问题，根源不是 CSS 写错，而是 JS 没走对路。showModal() 和 show() 行为完全不同：show() 只是让 dialog 可见，不创建 backdrop 层，DevTools 里根本查不到 ::backdrop 节点；open 属性或 HTML 中写 <dialog open> 同样无效——浏览器只在 showModal() 调用后才生成 backdrop 匿名盒。
常见错误包括：
- 直接在 HTML 里写
<dialog open>，然后只靠 CSS 试图控制::backdrop—— 完全无效 - JS 中写了
dialog.show()，但没调showModal() - 选择器写成
.modal::backdrop或::backdrop（缺dialog前缀），浏览器直接忽略
✅ 正确做法：确保 JS 显式调用 dialogEl.showModal()，且 CSS 使用 dialog::backdrop（带标签限定）。
dialog::backdrop 能设哪些样式？别碰 z-index 和布局属性
::backdrop 是一个合成层伪元素，浏览器强制将其渲染在 dialog 下方、其他内容上方，不参与常规层叠上下文。能安全使用的属性很有限：
立即学习“前端免费学习笔记（深入）”；
-
background-color（最常用，推荐用rgba(0,0,0,0.5)或#0008简写） -
opacity（慎用，部分浏览器会与background-color叠加出意外灰度） -
backdrop-filter（如blur(4px)，需配background-color才稳定生效） -
mix-blend-mode（适合深色/浅色主题叠加效果） -
filter（如grayscale(20%)，但性能开销略高）
❌ 避免：z-index、position、margin、padding、display——它们要么被忽略，要么导致不可预测行为。
点击 ::backdrop 关闭 dialog？得手动监听，浏览器不默认支持
标准行为中，::backdrop 默认 pointer-events: none，点击它不会触发任何事件，更不会自动关闭。必须显式处理：
- 给
dialog::backdrop设置pointer-events: auto（注意 Safari 16.4+ 才支持该设置） - 监听
dialog元素的click事件，检查event.target === dialog（即点在 backdrop 区域） - 避免在
dialog内部元素上调用event.stopPropagation()，否则click无法冒泡上来 - 不要对
dialog::backdrop直接绑定事件 —— 它是伪元素，无法添加事件监听器
移动端尤其要注意：iOS Safari 和部分安卓 WebView 中，::backdrop 对 touch 事件响应不稳定，可加 touch-action: auto 缓解穿透问题。
全屏元素（如 video）的 ::backdrop 不是通用遮罩层
video::backdrop 仅在全屏状态下作用于视频 UI 控件（如播放器按钮、进度条），不是用来盖遮罩的。误以为它能像 dialog::backdrop 一样覆盖整个背景，是常见误解。
真正实现视频背景调色或遮罩，要用 position: absolute 的透明 div 盖在 video 上：
- 必须设
background: rgba(0,0,0,0.3)（不能全透明，否则backdrop-filter无作用） - 必须设
backdrop-filter，值里至少含一个色彩类函数，如hue-rotate(90deg) - 遮罩层和
video必须同级或父容器设position: relative，确保定位准确 - Firefox 默认禁用
backdrop-filter，需用户手动开启layout.css.backdrop-filter.enabled
真正要注意的是：当页面本身有滚动、fixed 元素或 CSS 容器查询时，::backdrop 的渲染边界可能意外收缩。如果发现遮罩只盖住部分屏幕，优先检查 dialog 是否被某层 transform、overflow: hidden 或 clip-path 截断。
