CSS backdrop伪元素为何不显示？检查弹窗或模态框的backdrop属性设置。

本文共计820个文字，预计阅读时间需要4分钟。

最常见原因是目标元素未触发发展——全屏或模式状态——仅在 fullscreen 元素、mode 元素。

检查是否误以为任意遮罩都能用 ::backdrop：它不是通用背景覆盖层，而是浏览器为特定“系统级模态上下文”自动插入的伪元素。

• 对 <dialog>，必须调用 showModal()（不是 show()），否则 ::backdrop 不激活
• 对全屏元素，需通过 element.requestFullscreen() 进入，CSS 的 fullscreen 伪类也不等于 ::backdrop
• Chrome 113+ 才支持 <dialog> 的 ::backdrop；Safari 目前（2024）仍不支持 <dialog> 的 ::backdrop，仅支持全屏场景

::backdrop 样式写在哪才有效

必须用足够优先级的规则匹配到伪元素本身，且不能被父容器的 overflow: hidden 或 transform 截断。