毛玻璃穿透需确保伪元素与目标背景同层叠上下文且无遮挡层；父容器须透明、无背景/边框/opacity/transform，::before需content+absolute+transparent背景+backdrop-filter。
毛玻璃效果本身不支持背景穿透
直接用 ::before 伪元素加 backdrop-filter: blur()，并不能让其“穿透”到父容器背后的页面内容上——因为 ::before 是父元素的子层，它的背景默认是透明的，但「背后的内容」必须是它**视觉上的祖先（z轴更下层）且未被遮挡**。如果父元素自身有背景色或背景图，::before 的毛玻璃就只模糊父元素背景，不是你想要的「穿透式毛玻璃」。
真正起作用的是 stacking context 和层级剥离
要让 ::before 模糊到页面更底层（比如 body 背景、固定定位的图片），必须确保它和目标背景处于同一个 stacking context，且中间没有带背景的层阻断。常见错误是给父容器设了 background-color 或 opacity，这会创建新 stacking context 并遮住后层。
- 父容器不能有
background、border（或需设为 transparent）、opacity < 1、transform（未加will-change: transform时也可能触发） -
::before必须设content: ""、position: absolute、铺满尺寸，并显式声明background: transparent - 若父容器是
fixed或absolute定位，需确认它没脱离文档流导致层级错乱
一个可靠的工作示例
假设你想在弹窗上做穿透式毛玻璃，背后是 <body> 的渐变背景：
.glass-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 关键：无背景、无边框、不触发新层叠上下文 */
background: transparent;
border: none;
/* 不加 opacity，不加 filter，不加 transform（除非用 will-change） */
}
<p>.glass-modal::before {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: -1; /<em> 确保在内容之下，但仍在 body 之上 </em>/
}注意：z-index: -1 在这里有效，是因为 .glass-modal 没创建新 stacking context；如果它有 z-index: 10，那 ::before 的 -1 就只相对于该 context，不是全局。
立即学习“前端免费学习笔记（深入）”；
兼容性和 fallback 要手动处理
backdrop-filter 在 Safari 和 Chrome 较新版本支持，Firefox 默认仍禁用（需 layout.css.backdrop-filter.enabled 手动开启）。没有 JS 检测时，别依赖它做核心布局：
- 用
@supports (backdrop-filter: blur(1px))包裹毛玻璃样式 - 始终提供
background: rgba(255,255,255,0.1)作为降级色，否则无支持时会完全透明 - 避免在
::before上同时用background-image和backdrop-filter，部分浏览器会失效
穿透是否生效，最终取决于你能否让 ::before 的渲染层“看到”它想模糊的那层内容——这比写对 CSS 属性更依赖 DOM 结构和层叠规则。
