HTML中dialog标签的backdrop伪元素使用教程-html教程-PHP中文网

dialog::backdrop样式不生效，90%是因为未调用showmodal()；只有showmodal()才会生成该伪元素，且必须用dialog::backdrop选择器，仅支持background、backdrop-filter等有限样式，不支持z-index、position等布局属性。

html中dialog标签的backdrop伪元素使用教程

dialog::backdrop 样式不生效？90% 是因为没调用 showModal()，而不是 CSS 写错了。

浏览器只在 dialog.showModal() 执行后、dialog.close() 前这一瞬间生成 ::backdrop 这个匿名伪元素；其他任何方式都不会触发它：

dialog.show() 或 dialog.open = true —— 只显示 dialog，无遮罩、不锁焦点、ESC 不响应
<dialog open></dialog> —— 等价于 show()，同样不会生成 backdrop
DOM 尚未加载完成就调用 showModal() —— 报错 Cannot read property 'showModal' of null，JS 中断，根本走不到那一步
CSS 选择器写成 ::backdrop 或 .modal::backdrop —— 必须是 dialog::backdrop，缺一不可

::backdrop 是浏览器硬合成的全屏层，不参与常规盒模型，很多 CSS 属性直接被忽略：

✅ 安全可用：background（推荐 rgba(0, 0, 0, 0.5) 或 #0006）、backdrop-filter（必须搭配非透明 background 才生效）、filter（如 grayscale(10%)）
⚠️ 慎用：opacity —— 它会作用在整个 dialog 元素上，连内部按钮都变透明，不是只调遮罩
❌ 一律无效：width/height、top/left、margin/padding、transform、z-index、display、border

想加毛玻璃效果？必须这样写：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

dialog::backdrop {
  background: rgba(0, 0, 0, 0.01); /* 关键：不能是 transparent */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

浏览器默认不支持点击 ::backdrop 关闭 —— 因为它的 pointer-events 默认是 none，且它不是真实 DOM 节点，无法直接绑定事件：

示例逻辑：

dialog.addEventListener('click', (e) => {
  if (e.target === dialog) {
    dialog.close();
  }
});

Firefox 至今不支持 dialog::backdrop；Safari 15.4+ 开始支持但 backdrop-filter 渲染极不稳定；Chrome/Edge 97+ 最稳。真正麻烦的是：

不能只靠 @supports selector(::backdrop) 做降级 —— 需配合 @supports (backdrop-filter: blur(1px)) 分层检测
background-image 或复杂 linear-gradient 在旧版 Safari 会直接回退为透明，遮罩“消失”
dialog 内部表单按 Enter 默认提交，不是关闭 dialog —— 这常被误认为“遮罩失效”，实际和 backdrop 无关
::backdrop 是伪元素，没有 offsetWidth、不能 getBoundingClientRect()、也不能用 e.target 直接拿到它