使用 CSS 实现毛玻璃模糊背景效果
这是 2024–2026 年非常流行的前端高级视觉效果之一，常用于：
- 模态框 / 抽屉 / 侧边栏的背景
- 卡片悬浮在模糊背景上
- 导航栏 / 工具栏的半透明磨砂感
- 音乐播放器、天气小组件、桌面壁纸风格 UI
当前最主流的实现方式对比（2025–2026）
| 方案 | 核心属性 | 浏览器支持（2025） | 性能 | 真实感 | 推荐指数 | 备注 |
|---|---|---|---|---|---|---|
| 1 | backdrop-filter: blur() | 极好（几乎全覆盖） | 中～高 | ★★★★★ | ★★★★★ | 首选 |
| 2 | filter: blur() + 伪元素 | 完美支持 | 中 | ★★★☆☆ | ★★☆☆☆ | 老项目兼容用 |
| 3 | SVG 滤镜 + feGaussianBlur | 完美支持 | 较低 | ★★★★☆ | ★☆☆☆☆ | 极致兼容用 |
| 4 | canvas / WebGL 实时模糊 | 完美支持 | 较低～中 | ★★★★★ | ★★☆☆☆ | 动态内容才考虑 |
结论：99% 的现代项目直接使用 backdrop-filter: blur() 就够了，性能与效果的性价比最高。
方案一：最推荐写法（backdrop-filter）
/* 1. 最经典的毛玻璃卡片 */
.glass-card {
/* 核心三件套 */
background: rgba(255, 255, 255, 0.18); /* 半透明白色 */
backdrop-filter: blur(16px) saturate(180%); /* 模糊 + 饱和度提升 */
-webkit-backdrop-filter: blur(16px) saturate(180%);
: solid (, , , );
: ;
: (, , , );
: ;
}
(: dark) {
{
: (, , , );
: solid (, , , );
}
}
{
: (, , , );
: ();
-webkit-: ();
: ;
: solid (, , , );
}
