::backdrop 仅在 JavaScript 调用 showModal() 的 上生效，且需为 body 直系子元素、无裁剪上下文、显式设置 background；其他弹窗方式或 open=true 均无效。
为什么 ::backdrop 没有渲染背景色
根本原因是：浏览器只在使用 showModal() 显式调用的 <dialog></dialog> 元素上应用 ::backdrop 伪元素。如果你用的是自定义弹窗（比如 div + display: block）、modal 类库（如 Bootstrap Modal）、或通过 open 属性直接设为 true 的 <dialog></dialog>，::backdrop 都不会生效。
它不是通用遮罩层样式钩子，而是 <dialog></dialog> 的专属行为组件 —— 且仅响应 JavaScript 主动触发的模态态。
::backdrop 样式写对了但没效果的常见原因
即使用了 <dialog></dialog>，也容易漏掉关键点：
-
<dialog></dialog>必须是 document body 的直系后代（不能被transform、filter、will-change等属性包裹，否则 backdrop 渲染层被截断） - 未调用
dialogEl.showModal()，而是只设dialogEl.open = true（这只会进入非模态态，无 backdrop） - CSS 中写了
::backdrop但没加background或设为transparent（默认透明，肉眼不可见） - 父容器设置了
overflow: hidden或裁剪上下文（如clip-path），把 backdrop 区域剪掉了
确保 ::backdrop 显示的最小可行代码
以下是最简可运行结构（复制即用，无需框架）：
立即学习“前端免费学习笔记（深入）”；
<dialog id="myDialog">
<p>我是弹窗内容</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<button onclick="this.closest('dialog').close()">关闭</button>
</dialog>
<p><button onclick="document.getElementById('myDialog').showModal()">打开模态框</button></p><p><style>
dialog::backdrop {
background: rgba(0, 0, 0, 0.5); /<em> 必须显式设置 </em>/
}
</style>注意：showModal() 会自动将 <dialog></dialog> 提升到顶层并启用 backdrop；不需要额外 z-index 或 position 控制。
兼容性与 fallback 注意点
::backdrop 在 Safari 15.4+、Chrome 97+、Firefox 99+ 支持良好，但旧版 Safari 完全不支持，且无法用 @supports 精准检测（因部分浏览器报告支持但实际不渲染 backdrop）。
稳妥做法是：
- 用
dialog:not([open])::backdrop这类选择器做渐进增强（避免影响非模态态） - 对不支持的环境，用 JS 动态插入一个同尺寸
<div class="backdrop"> 并控制显隐<li>不要依赖 <code>::backdrop做关键遮罩逻辑（比如防点击穿透）——<dialog></dialog>自身的模态行为才是防交互的核心，backdrop 只是视觉层
真正容易被忽略的是：backdrop 的绘制层级独立于普通 stacking context，它不响应父元素的 z-index，也不受 transform 影响 —— 但一旦父级触发了新的层叠上下文（比如 opacity ），backdrop 就可能被压制或消失。
