backdrop-filter 模糊发灰是高斯模糊固有特性，需用 saturate(180%) 补色且必须与 blur() 合并在一行声明；父容器须有真实背景内容，禁用 overflow:hidden+border-radius 组合；深色模式推荐 rgba(30,30,46,0.4) 等蓝灰基底色。
backdrop-filter 模糊后背景发灰，怎么救回来
blur() 单独用必然发灰——这是高斯模糊的数学特性，不是 bug。它天然压低对比度、稀释饱和度，结果就是“蒙尘玻璃”而不是“磨砂玻璃”。必须用 saturate() 补色，且不能和 blur() 拆开写。
-
backdrop-filter: blur(10px) saturate(180%)是实测安全组合；saturate(200%)以上在部分 Android WebView 中会溢色（尤其深蓝/紫渐变） - 别碰
brightness()或contrast()：它们会放大底层噪点，模糊边缘容易出光晕或色块 - Safari 只认合并声明：如果写成两行
backdrop-filter: blur(10px); backdrop-filter: saturate(180%)，后者会覆盖前者，只剩饱和度没模糊
为什么加了 backdrop-filter 还是看不到背后内容
根本原因不是滤镜失效，而是它没东西可模糊。backdrop-filter 作用的是“该元素背后的层叠上下文”，不是它自己的 background-image，更不是空气。
- 父容器必须有真实视觉内容：比如
body设了background-image，或祖先元素用了linear-gradient()、radial-gradient() - 禁止
overflow: hidden+border-radius同时存在：WebKit（尤其是 iOS 15.4 之前）会直接放弃合成，显示为纯色块 - 临时验证方法：给父容器加
outline: 1px solid red，确认它确实覆盖了你想模糊的区域
深色模式下毛玻璃背景颜色怎么设才不吞文字
浅色模式常用的 rgba(255, 255, 255, 0.12) 直接套到深色主题上，会发灰、失层次、文字像浮在雾里。关键不是调 alpha，而是换基底色本身。
- 推荐深色基底：
rgba(30, 30, 46, 0.4)（偏蓝灰）或rgba(28, 28, 38, 0.35)（更中性），alpha 控制在 0.3–0.45 区间 - 禁用
hsla()或复杂渐变做玻璃背景：部分安卓 WebView 对非rgba()半透解析不稳定，可能突然全黑或全透 - 别用
@media (prefers-color-scheme: dark)切换整条backdrop-filter规则——重绘卡顿明显；改用 CSS 自定义属性动态换background-color值即可
blur() 值设多少才不翻车
模糊半径不是越大越高级。超过 12px 后，移动端性能下降明显，文字边缘开始发虚，iOS Safari 尤其敏感。
-
blur(4px)～blur(8px)：适合导航栏、小浮层、表单卡片，保留细节又带质感 -
blur(10px)～blur(12px)：主流推荐区间，配合saturate(180%)平衡通透感与背景识别度 - 绝对避免
blur(0px)当开关：它仍触发合成层，GPU 开销和开的时候几乎一样；该关就用backdrop-filter: none
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
