backdrop-filter 必须配合半透明 background 才生效，因它仅模糊元素背后内容，若背景不透明则无法透出被模糊的底层；推荐用 rgba() 控制透明度在 0.05–0.3 之间，并搭配 -webkit- 前缀及 saturate() 提升通透感。
backdrop-filter 必须配合半透明 background 才生效
很多人写完 backdrop-filter: blur(12px) 没反应，根本原因是上层元素的 background 完全不透明（比如 background: white 或 background-color: #fff）。backdrop-filter 作用的是“该元素背后的内容”，如果它自己是实心不透明块，背后内容根本透不出来，自然看不到模糊。
正确做法是强制用 rgba() 或 hsla() 写背景色，透明度建议控制在 0.05–0.3 区间：
-
background: rgba(255, 255, 255, 0.12)—— 浅色主题常用 -
background: rgba(30, 30, 46, 0.4)—— 深色主题更稳 - 避免用
background: transparent，它不提供视觉遮罩，毛玻璃感极弱 - Safari 旧版本（iOS 15.4 之前）对
rgba()透明度低于0.08的渲染不稳定，慎用超低值
SCSS Mixin 要封装 blur + saturate + vendor prefix
直接写重复的 -webkit-backdrop-filter 很容易漏，而且 blur() 单独用容易发灰，加 saturate(180%) 是提升通透感的关键。SCSS Mixin 最好把这三者绑死：
@mixin glass($blur: 12px, $saturation: 180%) {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur($blur) saturate($saturation);
-webkit-backdrop-filter: blur($blur) saturate($saturation);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.12);
}
调用时只需：@include glass(16px);。注意两点：
立即学习“前端免费学习笔记（深入）”；
- 不要在 Mixin 里硬编码
background，最好抽成参数或用占位符，方便深色模式覆盖 - 如果项目要兼容 iOS 微信 X5 内核（本质是旧版 Blink），这个 Mixin 会直接失效，得配降级方案
-
$saturation值超过200%在部分 Android WebView 里可能溢出变色，保守用160%–190%
多层级滤镜叠加时，z-index 和 stacking context 是关键
当你在一个卡片里套多个带 backdrop-filter 的子元素（比如标题栏 + 内容区 + 底部按钮），容易出现“某一层模糊了另一层”的错乱。这不是 bug，而是浏览器按层叠上下文逐层计算 backdrop 的结果。
必须确保：
- 所有玻璃元素都在同一个 stacking context 下（比如父容器设
position: relative且没触发新层叠） - 避免给玻璃子元素设
z-index: 0或负值——它会让该元素“沉到背景层下面”，导致 backdrop 失效 - 如果用了
transform、opacity 、<code>will-change等，会隐式创建新 stacking context，此时 backdrop 只作用于该 context 内部，而非整个页面背景 - 真要多层玻璃，建议只在最外层容器用
backdrop-filter，内部用background: rgba()做层次区分，别层层套
性能敏感场景下，blur 半径和元素尺寸必须受控
在中低端 Android 设备或 iOS Safari 滚动时，backdrop-filter: blur(20px) 可能引发明显掉帧。不是参数越大越好，得看实际载体：
- 全屏蒙层？blur 控制在
8–12px，再大收益递减，耗电陡增 - 小卡片（宽blur(6–10px) 足够，
16px已属过重 - 绝对定位且带
fixed背景图的容器？blur 值每 +2px，内存占用约 +15%，滚动卡顿概率翻倍 - CI/CD 构建时可加检查：用 PostCSS 插件扫描 SCSS 中所有
blur()值，>16px 自动告警
真正难处理的从来不是怎么写出来，而是当设计师说“再加一层柔光”、产品说“全屏都毛玻璃”、测试报“华为 P30 滚不动”时，你得知道哪一行参数该砍、哪一层 context 该拆、哪个 fallback 能扛住 Safari 15.3。
