滤镜属性

最后更新：2026-09-13

filter 滤镜属性

filter 用于对元素施加图形滤镜效果，如模糊、亮度调整、对比度、灰度等，类似 Photoshop 中的滤镜功能。它作用于元素的渲染结果，能同时影响元素及其子元素的内容，是处理图片和视觉特效的常用工具。

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

📝 语法

filter: none | <filter-function>+;
/* <filter-function> = blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() */

⚙️ 取值

值	类型	描述
`none`	关键字	无滤镜
`<filter-function>`	类型	blur/brightness/contrast/drop-shadow/grayscale/hue-rotate/invert/opacity/saturate/sepia

▶ 示例

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

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
filter	✓ v53	✓ v12	✓ v35	✓ v9.1	✓ v40
所有主流浏览器均支持

提示： 可以同时使用多个滤镜函数，用空格分隔，按顺序依次应用。

注意： filter 会影响元素及其所有子元素；如果只想模糊背景而不影响前景内容，请使用 backdrop-filter。

❓ 常见问题

Qfilter 和 opacity 都能调透明度，有什么区别？

Aopacity 只能整体调整元素的不透明度，且会创建层叠上下文；filter: opacity(50%) 是滤镜链的一环，可以和其他滤镜（如 blur、saturate）组合使用。两者都能触发 GPU 合成，但 opacity 有专门的优化路径，简单的透明度变化优先用 opacity，复合效果才用 filter。

Qfilter 对性能有影响吗？

A有。尤其是 blur() 和 drop-shadow() 这类开销大的滤镜，会触发复杂的像素计算，在大量元素或低端设备上容易掉帧；亮度、对比度、饱和度等相对较轻。建议：只在静态或 hover 时应用、避免同时给多个大元素加模糊、必要时用预生成图片代替实时滤镜，并在目标设备上测试。

Qfilter 和 backdrop-filter 有什么区别？

Afilter 作用于元素自身及其全部子内容，比如给整张图片加模糊；backdrop-filter 作用于元素「背后」的内容，产生毛玻璃效果，常用于导航栏、弹窗背景，前景文字不受影响。backdrop-filter 兼容性略差且性能开销更大，两者经常配合使用来实现精致的界面层次。

Q如何把图片变成灰色，悬停时恢复彩色？

A用 grayscale()：默认状态设置 filter: grayscale(100%)，悬停时改为 grayscale(0) 或 none，再配合 transition: filter 0.3s 过渡即可平滑变色。这是非常常见的「置灰—恢复」交互，常用于纪念日页面、失效头像、图片墙 hover 效果，实现成本极低。