CSS 滤镜（filter）是 CSS3 推出的一组“即时图形后期”工具。
它不需要 Photoshop，也不需要 Canvas，只要一行声明就能把亮度、对比度、模糊、色相偏移等视觉效果实时渲染到任何元素上——图片、文字、视频、背景图，甚至整个模块都可以一次性处理。
下面带你从零开始认识这套“前端版美图秀秀”。
一、最简记忆：滤镜 = 函数链
filter: <函数-1>(参数) <函数-2>(参数) … ;
- 顺序从左到右依次执行，类似管道符。
- 每个函数都有明确区间，超出即 clamp（被裁剪）。
- 可以写任意多个，空格分隔；也可以只写一个。
二、10 个原生函数速查表
| 函数 | 作用 | 默认值 | 常见玩法 |
|---|---|---|---|
blur(px) | 高斯模糊 | 0 | 毛玻璃背景、loading 遮罩 |
brightness(number) | 线性亮度 | 1 | 0.6 夜间模式，1.4 高光 |
contrast(number) | 对比度 | 1 | 1.5 让黑白更分明 |
grayscale(number) | 去色 | 0 | 1 彻底灰度，0.5 淡彩 |
sepia(number) | 复古棕褐 | 0 | 1 老照片，0.3 暖色打底 |
saturate(number) | 饱和度 | 1 | 0 灰度，2 鲜艳 |
hue-rotate(deg) | 色相旋转 | 0deg | 180deg 反色，90deg 换季节 |
invert(number) | 负片 | 0 | 1 完全反色，0.9 暗黑模式 |
opacity(number) | 透明度 | 1 | 与 CSS opacity 差异见注① |
drop-shadow() | 真实投影 | 无 | 支持半透明 PNG 的“镂空”阴影 |
注①：filter:opacity() 会创建独立层叠上下文，而 opacity 属性不会；前者还能被硬件加速。
三、组合实战 4 例
- 一键暗黑
.dark {
filter: invert(1) hue-rotate(180deg) brightness(1.1);
}
原理：先反色，再把色相转半圈，最后略提亮，文字与图片一起“变黑”。
- 毛玻璃遮罩
.mask {
backdrop-filter: blur(10px) saturate(1.2);
background: rgba(255,255,255,0.4);
}
backdrop-filter 只模糊背后内容，自身背景保持半透明，iOS 风导航栏标配。
- 图片 hover 高亮
img {
transition: filter .3s;
}
img:hover {
filter: brightness(1.15) saturate(1.25);
}
鼠标移入瞬间“亮 + 艳”，移出平滑回落。
- 文字故障风
.glitch {
filter: contrast(2) hue-rotate(90deg);
text-shadow: 2px 0 #0ff, -2px 0 #f0f;
}
高对比 + 色相偏移 + 双色阴影，赛博朋克感拉满。
四、性能与兼容
-
硬件加速：现代浏览器会把 filter 丢给 GPU，通常比 Canvas 快，但：
- 同时挂 5+ 个滤镜、大面积模糊（>30 px）或 4K 视频仍可能掉帧。
- 移动端尽量
will-change:filter提前声明，动画结束及时清除。
-
兼容性（2025 年 5 月）：
- 桌面：Chrome 53+、Edge 79+、Firefox 55+、Safari 14+ 全支持。
- 移动端：iOS Safari 14+、Android Chrome 90+ 全覆盖。
- 唯一老梗：IE 全系不支持，可优雅降级（无滤镜即原图）。
-
前缀：如今无需
-webkit-，但老设备（Android 7）仍建议：
-webkit-filter: blur(5px);
filter: blur(5px);
五、常见坑点
filter会让元素生成包含块（contain: paint），内部position:fixed会“降级”为相对于该元素。drop-shadow与box-shadow差异：前者沿不透明像素边缘生成，适合 PNG 图标；后者永远矩形。- 滤镜不能作用于：
– 父元素对子元素的背景穿透（background-filter才行）
– 部分表单控件（如<video>的 controls 条，需关闭原生控件再自定义）
六、一句话总结
CSS filter 把“后期调色”从设计软件搬到了浏览器，一行代码即可让网页拥有场景化氛围：
白天/黑夜、节日换肤、图片灰度、视频负片、毛玻璃导航……
掌握这 10 个函数，你就拥有了不刷新页面、不增加图片体积的即时视觉魔法。
