CSS backdrop-filter 背景滤镜
backdrop-filter：毛玻璃效果、blur()/brightness()/saturate()滤镜函数、与filter区别（作用于背后内容）、性能注意事项（GPU加速） · 难度：入门 · +10XP
CSS backdrop-filter —— 毛玻璃效果一行代码搞定
iOS的毛玻璃模糊效果曾经需要复杂的JS+Canvas实现。现在CSS的backdrop-filter一行代码就能对元素背后的内容施加滤镜。
经典毛玻璃卡片
.glass-card {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
}常用滤镜函数
| 函数 | 效果 |
|---|---|
| blur(10px) | 高斯模糊 |
| brightness(0.5) | 变暗 |
| saturate(2) | 加饱和度 |
| contrast(1.5) | 加对比度 |
| sepia(1) | 褐色怀旧 |
动手练习
- 基础练习：做一个毛玻璃导航栏——固定在页面顶部，滚动时背景变模糊看到背后内容。
- 进阶应用：做一组毛玻璃卡片叠加在背景图上，不同卡片设置不同模糊程度做出层次感。
- 项目实战：做一个登录弹窗——弹窗背景是毛玻璃效果，后面的页面隐约可见。