[!info] related notes

• 所属 MOC: css-responsive-and-visual-moc
• 渲染成本: shadow-performance-impact-in-design

CSS filter 与 backdrop-filter 模糊

一句话回答

CSS 高斯模糊主要用两个属性：filter: blur() 作用于元素自身内容，backdrop-filter: blur() 作用于元素背后的背景区域，常用于毛玻璃效果。

核心区别

filter: blur()

• 作用对象：元素自身的内容（文字、图片、子元素等）
• 效果：让整个元素看起来变模糊
• 典型用途：图片模糊处理、背景图虚化

.blurred-image {
  filter: blur(8px);
}

backdrop-filter: blur()

• 作用对象：元素背后的区域（受 backdrop root 等边界限制，并非任意祖先背后的所有内容）
• 效果：元素本身不模糊，但它下面的内容变模糊，形成毛玻璃
• 典型用途：导航栏毛玻璃、弹窗背景模糊、卡片半透明效果

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* 仅在支持旧 Safari 等目标时保留 */
}

面试回答主线

毛玻璃效果怎么做

三步：

1. 元素设置半透明背景色（rgba 或 hsla）
2. 加 backdrop-filter: blur(值)
3. 按目标浏览器决定是否保留 -webkit- 前缀，并验证不支持时的背景与文字对比度

性能要注意什么

• 大面积模糊有性能成本，尤其在低端设备和移动端
• 背后内容变化时可能需要重新处理模糊区域；是否独立合成、是否重绘取决于浏览器与页面，需用性能工具确认
• 建议控制模糊范围，不要全屏滥用
• 不要默认加 will-change；它可能增加图层与内存开销，只在测量证明有收益时使用

兼容性

• filter 兼容性很好，现代浏览器都支持
• backdrop-filter 的无前缀支持随浏览器版本而异，旧 Safari 等环境可能需要前缀；以目标版本和兼容表为准
• 做降级方案：用足够不透明的背景维持文字对比度，再通过 @supports 启用毛玻璃

常见误区

只写 filter 不写 backdrop-filter

毛玻璃效果的核心是 backdrop-filter，不是 filter。filter: blur() 会让元素自己都模糊，达不到毛玻璃效果。

忘记半透明背景

backdrop-filter 只模糊背后内容，如果元素背景不透明，模糊效果会被挡住看不见。

最短记忆方式

• filter: blur() = 模糊自己
• backdrop-filter: blur() = 模糊背后（毛玻璃）
• 毛玻璃 = 可见的背后内容 + 透明或半透明背景 + backdrop-filter；前缀取决于兼容范围

参考

• MDN：backdrop-filter
• MDN：blur()