CSS中实现“毛玻璃”效果需用backdrop-filter: blur()，而非不存在的background-blur；它模糊元素背后堆叠上下文内容，需配合rgba背景色及@supports检测，并注意浏览器兼容性与层叠上下文限制。
background-blur 在 CSS 中并不存在，别被名字骗了
“毛玻璃”是视觉效果，不是某个叫 background-blur 的 CSS 属性。iOS 控制中心那种半透明+背景模糊的效果，在 CSS 里靠的是 backdrop-filter，而不是 filter 或 background 相关属性。它作用于元素背后的**整个堆叠上下文内容**，不是给自身背景图加模糊。
backdrop-filter: blur() 是核心，但兼容性必须查清
真正起作用的只有一行：backdrop-filter: blur(12px);。但它在 Safari（macOS/iOS）中默认支持，在 Chrome 和 Edge 中需要开启实验性功能（chrome://flags/#backdrop-filter），Firefox 则至今（2024）仍不支持（仅限 nightly 版本且需手动启用）。所以实际项目中：
- 必须搭配
background-color: rgba(255, 255, 255, 0.7)或类似半透色——否则在不支持的浏览器里会直接变成全透明或纯白 - 建议用
@supports (backdrop-filter: blur(1px))做特性检测，把模糊逻辑包在里面 - blur 值别超过
20px，iOS 上过大会触发渲染降级，Android WebView 几乎不支持该属性
层级和透明度陷阱：为什么背景还是“糊不了”？
常见现象：写了 backdrop-filter 却没效果，或者只模糊了部分区域。原因往往出在堆叠上下文上：
- 父容器不能有
overflow: hidden（会剪裁 backdrop 渲染区域） - 该元素本身不能是
position: static且没有建立新层叠上下文——建议显式加position: relative或isolation: isolate -
background必须带 alpha 通道（如rgba()、hsla()或transparent），纯rgb()+opacity会模糊自身内容，不是背景 - 背后的内容（比如 body 背景图）不能被父级遮挡；如果用
fixed容器盖住了 body，那模糊的就是那个 fixed 容器的背景，不是页面真实背景
一个最小可运行示例（含降级）
.control-panel {
background: rgba(255, 255, 255, 0.7);
padding: 16px;
}
<p>@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
.control-panel {
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
}
注意：-webkit- 前缀目前仍需保留，Safari 16.4 之前只认这个。别漏掉 @supports 外层的降级色，否则在 Firefox 或旧 Chrome 里就是一片白板。
立即学习“前端免费学习笔记（深入）”；
真要全平台保底，得准备两套 UI：一套用 backdrop-filter，另一套用静态模糊图 + 半透蒙版——后者无法动态响应滚动或背景变化，但至少能看。
