CSS backdrop-filter 怎么控制毛玻璃层：叠加顺序、透明背景与降级检查

做半透明导航栏或卡片时，最容易遇到的不是 blur() 不支持，而是覆盖层已经把背后的像素盖住了。另一个隐蔽问题是父级的 opacity 建立了 backdrop root，子元素能看到的背景范围随之改变。本例用同一份浏览器 demo 把这两个边界摆在一起核对。

透明背景和实色背景的最小配方

MDN 对这个属性的定义很明确：它把滤镜应用到元素后方的区域，因此元素自身或它的背景需要透明或部分透明。最小写法可以这样落地：

.glass-card {
  background: rgb(255 255 255 / 22%);
  border: 1px solid rgb(255 255 255 / 55%);
  backdrop-filter: blur(14px) saturate(145%);
}

这里的半透明背景不是装饰参数，而是可见效果的前提。把它改成 background: white 后，覆盖层本身变成不透明表面，背后的彩色条纹不再参与可见合成。

参数边界：透明度、滤镜顺序和性能取舍

滤镜值是一个以空格分隔的列表，浏览器按列表组合效果。blur(14px) saturate(145%) 适合先观察模糊，再决定是否增加颜色饱和度；半径越大，参与计算的邻域越大，也越应该限制卡片尺寸和数量。

backdrop root 会改变滤镜作用范围

官方说明列出了会建立 backdrop root 的情况，其中包括根元素、非 none 的 filter、小于 1 的 opacity、遮罩和非普通的混合模式。典型踩坑是给整块组件加了 opacity: .9，再期待内部卡片模糊页面背景；此时普通父级变成带 backdrop root 的边界，内部滤镜只能处理父级边界以内的背后内容。

.scene { background: linear-gradient(135deg, #ffb36b, #5b77ea); }
.scene--root { opacity: .9; }
.glass-card { backdrop-filter: blur(18px); }

实验右侧只比左侧普通父级多了 opacity: .9，两边仍使用相同的 blur(18px)；这就是“opacity 建立 backdrop root”的状态变化。排查时先暂时移除父级透明度，再看模糊范围是否恢复；这比继续增大 blur 半径更快。

兼容回退：让内容先可读，再增强视觉

backdrop-filter 的跨浏览器基线已在 2024 年建立，但旧设备和旧浏览器仍可能不支持。回退样式应先提供足够不透明的底色，再用特性查询增强：

.glass-card {
  background: rgb(28 36 56 / 92%);
}

@supports (backdrop-filter: blur(1px)) {
  .glass-card {
    background: rgb(28 36 56 / 58%);
    backdrop-filter: blur(14px);
  }
}

验收分三步：先关闭支持或移除增强规则，确认文字在深色底上仍清楚；再恢复半透明背景，确认背后的图形被柔化而非消失；最后给带 opacity、filter 或 mask 的父级做一次范围检查。

常见问题

为什么写了 backdrop-filter 却看不到模糊？

最常见原因是背景不透明，或者背后没有可辨认的图形。先把背景改成半透明，并放入明显的色块或图片验证。

backdrop-filter 和 filter 有什么区别？

filter 处理元素自身及其内容，backdrop-filter 处理元素后方的像素；两者叠加时还要检查是否因此建立了新的 backdrop root。

父级 opacity 为什么会让子元素的模糊范围变小？

小于 1 的 opacity 会建立 backdrop root，子元素只能在这个边界内取背后像素，不能越过父级继续处理页面背景。

生产环境一定要使用半透明白色吗？

不一定。半透明深色、浅色或带颜色的背景都可以，关键是保留可透出的 alpha，并用文字对比度和旧浏览器回退样式验收。

收尾检查

毛玻璃效果的判断顺序应是：覆盖层有 alpha → 背后确实存在可辨认像素 → 父级没有意外建立截断边界 → 不支持滤镜时仍有可读底色。按这个顺序检查，通常不需要盲目增加模糊半径。