CSS 背景滤镜：backdrop-filter 与滤镜性能边界

概述 `backdrop-filter` 对元素后方内容进行滤镜处理（如模糊/色彩偏移），常用于玻璃态 UI。其开销较高，需控制区域与层次，并在不支持浏览器回退到半透明背景。 示例 ```css .glass { backdrop-filter: blur(12px) saturate(1.2); background: rgba(255,255,255,0.6) } .filter { filter: blur(4px) } ``` 工程建议 - 控制范围：缩小应用区域与透明度层；避免全屏大面积滤镜。 - 合成与性能：结合合成层属性（`transform/opacity`）减少重绘；在低端设备降级。 - 兼容：特性查询并提供回退色；保证文本对比与可读性。 参考与验证 - MDN backdrop-filter 文档：https://developer.mozilla.org/docs/Web/CSS/backdrop-filter - CSS Filters 规范：https://www.w3.org/TR/filter-effects-1/ - web.dev 玻璃态 UI 指南：https://web.dev/articles/backdrop-filter