必须同时使用backdrop-filter和background-color: rgba()，否则无法实现毛玻璃效果；单独设置blur()无效，因该属性仅模糊元素背后内容，需半透明背景透出底层内容供滤镜处理。
backdrop-filter 必须和 background-color: rgba() 一起用，否则根本看不到模糊效果。 单独写 backdrop-filter: blur(10px) 却没反应？八成是背景色不透明，或者背后压根没内容可模糊。
为什么只加 backdrop-filter 看不到颜色遮罩
它模糊的是「元素背后的内容」，不是元素自己。如果 background-color: white 或 background: #fff，背后画面全被盖死，滤镜再强也无物可滤。浏览器计算时发现 alpha = 1，直接跳过模糊合成。
- 检查 computed styles：确认
background-color的 alpha 值是否小于 1（比如rgba(255,255,255,0.15)） - 别用
transparent—— 它等价于rgba(0,0,0,0)，没有遮罩层，视觉上像挖洞，不是玻璃 - 慎用
hsla()或纯渐变做基础背景：部分安卓 WebView 对非rgba()半透支持不稳定
RGBA 颜色值怎么选才不发灰也不压暗
alpha 值决定“透多少”，直接影响颜色遮罩的质感和可读性。太低看不清文字，太高又失去通透感。
- 浅色主题推荐：
rgba(255, 255, 255, 0.12)（0.08–0.15 是安全区间） - 深色主题更稳：
rgba(30, 30, 46, 0.4)（深灰基底 + 稍高 alpha 补足对比） - 避免多层叠加：比如
background: linear-gradient(..., rgba(255,255,255,0.2))再叠rgba()子元素，alpha 相乘后实际透过率可能跌破 10%，背景细节全丢
blur 值和 saturate 怎么配才不出错
模糊半径不是越大越好，饱和度也不是越高越鲜艳。两者组合不当，容易让文字边缘糊成一片，或在低端机上掉帧。
立即学习“前端免费学习笔记（深入）”；
-
blur(3px)到blur(6px)是多数设备的平衡点；blur(10px)在桌面端尚可，但在 iOS 16.5 以下 Safari 易卡顿 - 加
saturate(150%)能补回模糊导致的灰蒙感，但别碰brightness()或contrast()—— 它们会放大噪点 - Android WebView 中
saturate()超过 200% 可能溢出变色，保守控制在 160%–190%
父容器 overflow: hidden 是隐形杀手
当 backdrop-filter 元素的父级同时设了 overflow: hidden 和 border-radius，Safari 会直接放弃模糊合成，显示为一块纯色块。
- 解法不是删掉
overflow，而是把玻璃区域用position: absolute提出来，脱离父容器流 - 确保它仍在正确的 stacking context 中：用
z-index显式控制层级，且祖先不能有transform或will-change打乱上下文 - 滚动容器内（如列表项、瀑布流卡片）慎用 —— GPU 合成压力线性增长，滑动掉帧立刻出现
最易被忽略的一点：毛玻璃不是“加个滤镜就完事”，它是对背后整个堆叠上下文的采样与模糊。哪怕 DOM 结构只差一层、祖先少一个背景色、或 alpha 值小了 0.02，在某些 Safari 版本里都可能变成一块白板。
