::backdrop伪元素不能用于全屏背景模糊，它仅在原生全屏状态下作用于被全屏元素的遮罩层；正确方案是用body::before伪元素配合fixed定位、100vw/100vh尺寸、background-image和filter:blur()实现独立模糊层。
::backdrop 伪元素不适用于全屏遮罩层的背景模糊——它只在全屏 API（element.requestFullscreen()）触发的全屏状态下，作用于被全屏元素的「覆盖层」，比如 <dialog> 或自定义全屏容器的遮罩，不是用来模糊背景图的工具。
你真正想实现的，是「一个固定在视口、覆盖整个屏幕、自带高斯模糊效果、且不干扰前景内容」的视觉层。这和 ::backdrop 的语义与适用场景完全不匹配。
为什么不能用 ::backdrop 实现全屏背景模糊
-
::backdrop只在元素进入原生全屏状态时自动创建，且仅作用于该元素的「上层遮罩」（比如<dialog open>全屏时的暗色盖板），它本身没有 background-image，也不接受 filter 模糊自身 - 它无法控制尺寸（不是
100vw/100vh）、无法设置背景图、无法独立定位或分层 - 尝试对
body::backdrop或div::backdrop写样式基本无效，浏览器不支持这种写法
正确做法：用 ::before 伪元素构建独立模糊层
这是目前最稳定、兼容性最好、且能精准控制的方案：
-
::before是你可控的、可定位、可设背景、可加filter: blur()的真实渲染层 - 必须配合
position: fixed和100vw / 100vh，否则滚动时会偏移或漏边 -
z-index: -1是关键，确保它在所有内容之下，但又不被父容器的overflow: hidden或transform截断
常见错误写法：
立即学习“前端免费学习笔记（深入）”；
-
body { filter: blur(10px); }→ 整页糊掉，文字按钮全失焦 -
body::before { width: 100%; height: 100%; }→ 百分比相对 body 高度，若 body 高度不足则铺不满 -
z-index: -1但父容器有transform: translateZ(0)→ 伪元素被隔离进新层叠上下文，压不到底层
推荐写法（直接可用）：
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
filter: blur(12px);
z-index: -1;
}如果你真在用 <dialog> 并需要它全屏 + 背景模糊
那才轮到 ::backdrop 出场，但它只负责「遮罩色」，模糊仍得靠 backdrop-filter：
此时正确组合是：
dialog:modal {
/* 确保 dialog 进入全屏后，背后的内容（即 body 背景）能被模糊 */
}
<p>dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}</p><p>/<em> 但模糊效果必须加在 dialog 自身，且依赖 body 有背景图 </em>/
dialog {
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
will-change: filter;
}注意：这里 backdrop-filter 模糊的是 dialog 元素背后的区域（即 body 的背景图），不是 ::backdrop 本身。
模糊数值调到 10–14px 之间最稳；超过 16px 在中低端设备上容易出现边缘噪点或 GPU 渲染撕裂，尤其在滚动或动画中——这点很容易被忽略，但直接影响首屏体验。
