背景模糊Backdrop Blur

背景模糊实验台：给吸顶工具栏一层毛玻璃

任务是为这条吸顶工具栏定毛玻璃。拖背后模糊强度，切复杂背景与面板色调，看工具栏文字何时还在稳；再启用实色降级，看不支持滤镜时谁接管。背后模糊、对比徽章和降级徽章都长在工具栏物件上。

面板里读到的结论

刚才的模糊强度、面板色调和降级开关，对应的是 backdrop-filter 的几条主线：模糊背后、前景独立、对比自验、降级兜底。

• 模糊的是背后：backdrop-filter 只柔化面板后方的内容，不模糊前景文字和子元素——前景可读性要靠自己保证。
• 半透明背景才有毛玻璃：面板要给一定 alpha 的背景色，让背后内容透过来被柔化；完全不透明就看不到模糊效果。
• 模糊不补救对比：复杂背景上，半透明面板的文字对比仍可能浮动；要靠足够模糊、更不透明的底色或独立文字背景来稳。
• 降级必须独立写：不支持 backdrop-filter 的设备会直接忽略它，面板透明度兜不住文字；用 @supports 或 prefers-reduced-transparency 回退实色。
• 性能与电池有成本： backdrop-filter 是昂贵滤镜，大面积或滚动时可能掉帧；只用在吸顶栏、弹层等小块，避免铺满全屏。

什么时候专门用 backdrop-filter

看到想让浮层浮起又想保留背景层次时用；正文容器、印刷排版、没有降级方案的低端环境别铺毛玻璃。

怎么从需求走到降级方案

从「这块浮层要不要被读、设备支不支持」倒推底色与降级，再在真实背景上复测。

1. 确认前景浮层与背后内容：吸顶栏、弹层等小块才用；正文容器不用。
2. 给面板半透明背景色（如 rgba(20,27,54,.72)）再加 backdrop-filter: blur(N px)；N 常取 8–16。
3. 独立验收文字对比：在浅色、深色、图片和渐变背景下分别测，复杂背景上给足模糊或更不透明的底色。
4. 写降级：用 @supports not (backdrop-filter: blur(1px)) 或 prefers-reduced-transparency: reduce 回退到实色背景。
5. 真机复测：低端设备、滚动和高对比模式下确认文字仍可读、不掉帧。

盯这些关注点

调 backdrop-filter 时常只盯「够不够柔」，文字对比、降级触发和性能成本更容易出问题。

• 盯文字对比：复杂背景上浅色面板的深字、深色面板落在亮图上的白字，都要单独测，不靠模糊补救。
• 盯降级触发：不支持滤镜时面板只剩透明度；确认 @supports 或减少透明度偏好能切到实色。
• 盯性能与滚动：大面积 backdrop-filter 在低端机滚动时会掉帧；限制作用面积，必要时按视口裁剪。
• 盯减动效与高对比： prefers-reduced-transparency、高对比模式要给出无模糊的稳定结果。

同一条工具栏：正例与反例

目标都是让吸顶栏浮起又让文字可读。差异只在面板底色够不够稳、有没有写降级。