CSS 背景模糊 backdrop-filter
学习backdrop-filter · 难度：进阶 · +15XP
CSS 背景模糊 backdrop-filter
backdrop-filter 可以对元素后方区域（元素背后的内容）应用滤镜效果，是实现毛玻璃（Glassmorphism）效果的核心属性。与 filter 不同，它作用于元素的下层，而非元素自身。
基本语法
.glass {
backdrop-filter: blur(10px);
}
/* 多重效果 */
.backdrop {
backdrop-filter: blur(10px) brightness(0.8) saturate(150%);
}
可用的滤镜函数
| 函数 | 说明 |
|---|---|
blur() | 背景模糊（最常用） |
brightness() | 背景亮度 |
contrast() | 背景对比度 |
grayscale() | 背景灰度 |
saturate() | 背景饱和度 |
sepia() | 背景褐色 |
hue-rotate() | 背景色相旋转 |
invert() | 背景颜色反转 |
opacity() | 背景透明度 |
毛玻璃效果（Glassmorphism）
.glass-card {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
导航栏毛玻璃
.navbar {
position: fixed;
top: 0; left: 0; right: 0;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px) saturate(180%);
/* macOS/iOS 风格半透明导航栏 */
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
z-index: 1000;
}
/* 暗色主题 */
@media (prefers-color-scheme: dark) {
.navbar {
background: rgba(30, 30, 30, 0.7);
backdrop-filter: blur(10px) saturate(180%);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
}
模态弹窗背景模糊
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
}
抖音/Vue 风格毛玻璃侧边栏
.sidebar {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(30px) saturate(130%);
-webkit-backdrop-filter: blur(30px) saturate(130%); /* Safari */
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
注意事项
- 元素自身必须部分透明（否则看不到背后）
- 可以使用
background: rgba()实现半透明背景 - 应用到
<html>的backdrop-filter不会生效 - 大量模糊可能影响滚动性能，谨慎使用在频繁重绘区域
- Firefox 需开启
layout.css.backdrop-filter.enabled（最新版已默认支持） - Safari 仍需
-webkit-backdrop-filter前缀
性能建议
.glass-optimized {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
/* 避免在 backdrop-filter 元素上使用大量动画 */
/* 避免嵌套多个 backdrop-filter 元素 */
transform: translateZ(0); /* 创建合成层，启用 GPU 加速 */
}
backdrop-filter 是现代 UI 设计的重要工具。从 iOS 的控制中心到 macOS 的窗口边框，毛玻璃效果已经成为高端界面的标志性设计语言。