::backdrop仅对原生<dialog>调用showModal()时生效，非<dialog>元素（如div、自定义Modal）无法使用；必须显式设置background-color，且不支持z-index；兼容性差，旧版Safari等需回退手动遮罩层。

::backdrop 不能用于普通对话框组件——它只在 <dialog> 元素处于 open 状态时自动生效，且无法手动添加或复用到自定义弹窗、Modal、Toast 等非原生 <dialog> 结构中。

为什么 ::backdrop 对大多数对话框无效

浏览器只会在原生 <dialog> 元素调用 .showModal() 后，自动在它前面插入一个匿名的、不可见的遮罩层，并允许你用 ::backdrop 选中并样式化它。这个机制不触发于任何 div、section 或 class 名为 modal 的元素。

• 写了 .my-dialog::backdrop { background: rgba(0,0,0,0.5); }？没用，选择器根本匹配不到任何节点
• 给 <div class="dialog"> 加 open 属性？HTML 规范不识别，属性被忽略
• 试图用 JS 手动创建 ::backdrop？CSS 伪元素不能通过 DOM 操作生成，只能由浏览器按规则注入

<dialog> 原生组件下 ::backdrop 的正确用法

只有当你真正使用语义化 <dialog> 标签，并调用其内置方法时，::backdrop 才可用：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<dialog id="myDialog">
  <p>这是对话框内容</p>
  <button onclick="this.closest('dialog').close()">关闭</button>
</dialog>

<button onclick="myDialog.showModal()">打开对话框</button>

<style>
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  animation: fade-in 0.2s ease-out;
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
</style>

• 必须用 .showModal()（不是 .show()），否则 ::backdrop 不渲染
• ::backdrop 默认无样式，不设 background-color 就是全透明，看起来像“没遮罩”
• 它天然使用 position: fixed，铺满整个视口，无需手动写 top/left/width/height
• 不支持 z-index（它总在 <dialog> 下方、页面内容上方，层级已固定）

自定义对话框该用什么替代方案

95% 的项目用的是封装好的 Modal 组件（如 Ant Design、Element Plus、或手写的 <div class="modal">），这时必须放弃 ::backdrop，改用显式遮罩层：

立即学习“前端免费学习笔记（深入）”；

• 加一层 <div class="modal-overlay">，设 position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 1000;
• 或者更轻量：用伪元素 .modal::before，配合 position: relative 和 inset: 0
• 确保遮罩层有 pointer-events: auto（默认值），否则点击会穿透到底层
• 避免父容器有 opacity、transform 或 filter，否则会截断遮罩的层叠上下文，导致 z-index 失效

真正容易被忽略的点是：即使你用了 <dialog>，如果在它外层包裹了 opacity: 0.99 的容器，或对 <body> 做了 transform: translateZ(0)，::backdrop 的渲染和事件捕获仍可能异常——它的行为比看起来更“脆弱”。