📚 Filter 过滤器
filter 的作用是调整图像、背景和边框的渲染效果，对其进行模糊、颜色偏移等图像处理。它有两种应用方式，一是作为CSS属性，调用预定义函数；二是作为SVG的滤镜元素。本文介绍的是前者。
下面会先简要列出 filter 的所有预处理函数及其作用和参数，然后整理成一份表格，罗列出不同预处理函数在不同参数下的图像渲染结果。希望这样的纵横对比能加深对filter的理解和记忆。
语法
1 | <filter> : none | [ <filter-function> | <url> ]+ |
filter 过滤器可以重复设置；
预处理函数
- 亮度处理：
brightness
设置图像的亮度，取值0% ~ >100%，值取0%图像会全黑，值取100%则图像无变化，值超过100%图像会比原来更亮,默认是1。
1 | filter:brightness(0.4); |
- 设置对比度
contrast
设置图像对比度。取值0% ~ >100%，值取0%图像会全灰，值取100%则图像无变化，值超过100%图像会运用更低的对比,默认是1。
1 | filter: contrast(200%); |
- 饱和度
saturate
设置图像饱和度，取值0% ~ >100%，值取0%图像完全不饱和，值取100%则图像无变化，值超过100%图像有更高的饱和度。默认值1。
1 | filter: saturate(30%); |
- 灰阶处理
grayscale
设置图像灰度，取值0%~100%，值取0%图像无变化，值取100%则为完全灰度图像，默认值0，不支持px。
1 | filter: grayscale(100%) |
- 反转
invert
设置图像反转比例。取值0%~100%，值取0%图像无变化，值取100%则图像完全反转，默认值0。
1 | filter: invert(75%); |
- 透明
opacity
设置图像透明度，取值0%~100%，值取0%图像全透明，值取100%则图像无变化。默认值1。这个预定义函数与opacity属性的不同之处在于，一些浏览器为了提升性能会对filter提供硬件加速。
1 | filter: opacity(25%); |
sepia
设置图像转为深褐色的转换比例，取值0%~100%，值取0%图像无变化，值取100%则图像完全深褐色，默认值0。
1 | filter: sepia(60%); |
- 色相旋转
hue-rotate
给图像应用色相旋转。单位deg，默认值0deg,0deg ~ 360deg为一周期。
1 | filter: hue-rotate(90deg); |
- 模糊处理
blur
设置图像的模糊度。取值即高斯模糊函数的标准差，简单理解就是设置了多大的值，就表示多少的像素会融在一起。所以值越大越模糊。单位为px，不支持%。默认值为0。
1 | filter: blur(5px); |
- 阴影
drop-shadow
设置图像阴影，除了没有inset关键字，其他设置与box-shadow很相似。
1 | filter: drop-shadow(16px 16px 10px black) |
👀 效果对比
| brightness | 0% | 50% | 100% | 150% | 1000% |
| contrast | 0% | 50% | 100% | 150% | 1000% |
| saturate | 0% | 50% | 100% | 150% | 1000% |
| grayscale | 0% | 25% | 50% | 75% | 100% |
| invert | 0% | 25% | 50% | 75% | 100% |
| opacity | 0% | 25% | 50% | 75% | 100% |
| sepia | 0% | 25% | 50% | 75% | 100% |
| hue-rotate | 0deg | 90deg | 180deg | 270deg | 360deg |
| blur | 0px | 1px | 5px | 20px | 100px |
| drop-shadow | 0px 0px 0px black | 0px 0px 10px black | 10px 0px 10px black | 0px 10px 10px | 10px 10px 10px black |
🚧 注意
- 预处理函数是作用于整个元素的，即使边框也会受到影响
- 某些函数处理后，元素的渲染范围已经超出了元素本身，例如
blur函数。