滤镜与背景滤镜效果
模糊、饱和、混合模式 — 及其性能与 a11y 代价。
视觉设计进阶
为什么
backdrop-filter: blur() 给定义现代 UI 的毛玻璃效果，但过度用在低端设备卡且可降文本对比低于 WCAG。刻意用非装饰用。
Google 研究显示用户在 50ms 内形成第一印象，75% 的网站可信度判断基于视觉美学。一致的间距比例（8px 网格）可测量地降低认知负荷。
何时使用
backdrop-filter 用于多变内容上的粘性头/覆盖（实色背景会藏上下文）。跳过静态面 — 纯色更便宜更清晰。
如何做
1. backdrop-filter — filter: blur(12px) saturate(180%); 需半透明背景以透显
2. -webkit-backdrop-filter — 始终含前缀；Safari 仍需
3. 性能 — backdrop-filter GPU 重；每屏限 1–2 面，绝不在滚动列表
4. 对比 — 忙照片上毛玻璃可降文本对比；加 text-shadow 或更深背景
5. 回退 — @supports (backdrop-filter: blur(1px)) { ... } 否则更高 opacity 实色背景
6. 混合模式 — mix-blend-mode: overlay 做图上文本；隔离父以包含混合
7. 减少透明 — @media (prefers-reduced-transparency: reduce) { backdrop-filter: none; }
示例
/* 毛玻璃头 — 含前缀、回退、减少透明守卫 */
.header {
background: rgb(255 255 255 / 70%); /* 回退背景，半透明 */
-webkit-backdrop-filter: blur(12px) saturate(180%);
backdrop-filter: blur(12px) saturate(180%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.header { background: rgb(255 255 255 / 95%); } /* 更不透明，无模糊 */
}
@media (prefers-reduced-transparency: reduce) {
.header { background: var(--color-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* 混合模式 — 图上文本，隔离 */
.hero { isolation: isolate; }
.hero h1 { mix-blend-mode: overlay; color: white; }
/* 性能 — 勿 backdrop-filter 滚动列表 */
.list-item { /* backdrop-filter: blur(8px); ← 勿，滚时卡 */ }
常见问题
- ⚠无 -webkit- 前缀 — Safari 显实色背景，15% 用户毛玻璃消失
- ⚠每列表项 backdrop-filter — 滚时 GPU 卡，尤低端 Android
- ⚠无减少透明守卫 — 禁透明用户见刺眼 70% 不透明背景
最佳实践
- ✓始终含 -webkit-backdrop-filter — Safari 仍需前缀
- ✓每屏限 1–2 backdrop-filter 面 — GPU 成本滚时快加
- ✓提供实色回退 + 减少透明守卫 — 旧浏览器和 a11y 可用