<p>真正起作用的是 backdrop-filter，需配合透明背景和 -webkit- 前缀（尤其 Safari），并确保父容器内容可见、无 overflow: hidden 等遮挡；blur 值建议 8–16px，注意性能与兼容性。</p>
background-blur 不能直接用，得靠 backdrop-filter
CSS 里没有 background-blur 这个属性，很多人搜错关键词就卡住了。真正起作用的是 backdrop-filter，它会对元素「背后」的内容（不是自身背景，而是父容器或更外层的可视内容）做模糊处理，从而模拟毛玻璃效果。
关键前提是：该元素必须是「透明/半透明」的，否则看不到背后的东西被模糊——所以通常要配合 background-color: rgba(255, 255, 255, 0.1) 或类似透明色使用。
常见错误现象：backdrop-filter: blur(10px) 写了但没效果，大概率是因为：
- 元素背景是纯不透明色（比如
white或#fff），挡住了背后内容 - 父容器没内容、或内容被遮盖（比如父元素
overflow: hidden切掉了背景区域） - 没加
-webkit-backdrop-filter，在 Safari 旧版本或某些 iOS Webview 中失效
必须加 -webkit- 前缀，Safari 兼容性最坑
backdrop-filter 在 Chrome 和 Edge 现代版中已原生支持，但 Safari（尤其 iOS 15.4 之前）只认 -webkit-backdrop-filter。不加前缀，iOS 上直接不生效，且不会报错，很难排查。
立即学习“前端免费学习笔记（深入）”；
实操建议写成这样：
.glass {
background-color: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); /* 必须加 */
border-radius: 12px;
}注意：-webkit-backdrop-filter 不是可选项，是 Safari 生存必需项；blur 值建议控制在 8px–16px 之间，太小看不出效果，太大容易糊掉文字细节。
层级和 overflow 容易导致毛玻璃“消失”
毛玻璃效果依赖「透过当前元素看到其堆叠上下文后方的内容」。如果父容器设置了 overflow: hidden，而模糊区域刚好在裁剪边界外，那背后内容就被切掉了，backdrop-filter 就没东西可模糊。
另一个典型问题：元素用了 position: fixed 或 absolute，但它的堆叠上下文（比如某个 z-index 非 auto 的祖先）把背景内容挡在了更下层，导致“背后”其实是空白。
排查方法：
- 临时给元素加
outline: 2px solid red，确认它是否真覆盖在有内容的区域上 - 检查父级是否有
overflow: hidden、clip-path或transform（某些 transform 会创建新层叠上下文） - 在 DevTools 里选中该元素，看「Computed」面板中
backdrop-filter是否被标记为「invalid」或灰色（说明不生效）
性能敏感，移动端慎用高 blur 值
backdrop-filter 是合成层操作，但高斯模糊（尤其是 >16px）在低端 Android 设备或 iOS 旧机型上会导致明显掉帧，滚动时卡顿肉眼可见。
优化建议：
- 优先用
blur(8px)或blur(10px)，视觉差异不大，性能好很多 - 避免在频繁重绘区域（如轮播图蒙版、下拉菜单）里无节制使用
- 不要对
body或全屏div直接套毛玻璃，影响范围越大，GPU 压力越明显 - 可以配合
@supports (backdrop-filter: blur(0))做渐进增强，降级为纯半透明背景
真正难的不是写对那两行 CSS，而是让模糊始终「有内容可模」，并且在各种设备上不卡、不闪、不意外消失。
