背景滤镜属性

最后更新：2026-09-13

backdrop-filter 背景滤镜属性

backdrop-filter 属性用于对元素背后的区域应用滤镜效果（如模糊、亮度调整），常用于实现毛玻璃（磨砂玻璃）效果。与 filter 不同，backdrop-filter 影响的是元素下层的内容而非元素本身。该属性在现代浏览器中支持良好，但需要元素背景具有一定透明度才能看到效果。

分类
初始值	none
继承	否
适用于
可动画
CSS 版本	CSS3
状态	标准

📝 语法

backdrop-filter: none | <filter-function>;

⚙️ 取值

值	类型	描述
`none`	关键字	无背景滤镜
`<filter-function>`	类型	背景模糊/滤镜效果

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
backdrop-filter	✓ v79	✓ v79	✓ v103	✓ v9	✓ v66
所有主流浏览器均支持

提示： backdrop-filter 需要元素背景透明或半透明才能看到背后内容的滤镜效果。

重要： backdrop-filter 与 filter 的区别：filter 影响元素自身，backdrop-filter 影响元素背后的内容。

❓ 常见问题

Qbackdrop-filter 和 filter 有什么区别？

Afilter 作用于元素自身及其子元素的渲染结果；backdrop-filter 作用于元素背后"透过来"的内容区域，对背景层做滤镜处理，不影响元素自身的文字和内容。典型应用是毛玻璃导航栏 backdrop-filter: blur(10px)，需配合半透明背景才能看到模糊效果。二者可同时使用，且都会创建层叠上下文。

Qbackdrop-filter 的浏览器兼容性如何？

A现代浏览器已普遍支持：Chrome 76+、Edge 76+、Firefox 103+ 默认开启、Safari 9+（需 -webkit- 前缀）。建议同时写 -webkit-backdrop-filter 和 backdrop-filter。IE 不支持，且需要元素背景半透明才能看到效果。

Q毛玻璃效果为什么没生效？

A常见原因：一是元素背景完全不透明（如 background: #fff），背后内容被遮住；二是忘了 -webkit- 前缀，旧版 Safari 不渲染；三是浏览器不支持（IE）；四是背后无可模糊内容。正确做法：用半透明背景如 rgba(255,255,255,0.3) 并确保背后有内容。

Qbackdrop-filter 支持哪些滤镜函数？

A与 filter 相同，支持 blur()、brightness()、contrast()、grayscale()、sepia()、hue-rotate()、invert()、saturate()、opacity()、drop-shadow()，可多个空格组合。毛玻璃 + 色彩增强是导航栏常见组合。