怎么在CSS中使用::before实现毛玻璃背景穿透-css教程-PHP中文网

毛玻璃穿透需确保伪元素与目标背景同层叠上下文且无遮挡层；父容器须透明、无背景/边框/opacity/transform，::before需content+absolute+transparent背景+backdrop-filter。

怎么在css中使用::before实现毛玻璃背景穿透

毛玻璃效果本身不支持背景穿透

直接用 ::before 伪元素加 backdrop-filter: blur()，并不能让其“穿透”到父容器背后的页面内容上——因为 ::before 是父元素的子层，它的背景默认是透明的，但「背后的内容」必须是它**视觉上的祖先（z轴更下层）且未被遮挡**。如果父元素自身有背景色或背景图，::before 的毛玻璃就只模糊父元素背景，不是你想要的「穿透式毛玻璃」。

真正起作用的是 stacking context 和层级剥离

要让 ::before 模糊到页面更底层（比如 body 背景、固定定位的图片），必须确保它和目标背景处于同一个 stacking context，且中间没有带背景的层阻断。常见错误是给父容器设了 background-color 或 opacity，这会创建新 stacking context 并遮住后层。

父容器不能有 background、border（或需设为 transparent）、opacity 、<code>transform（未加 will-change: transform 时也可能触发）
::before 必须设 content: ""、position: absolute、铺满尺寸，并显式声明 background: transparent
若父容器是 fixed 或 absolute 定位，需确认它没脱离文档流导致层级错乱

一个可靠的工作示例

假设你想在弹窗上做穿透式毛玻璃，背后是的渐变背景：

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

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

下载

.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>/
}</p>

注意：z-index: -1 在这里有效，是因为 .glass-modal 没创建新 stacking context；如果它有 z-index: 10，那 ::before 的 -1 就只相对于该 context，不是全局。