过滤器允许我们对元素进行操作。
你通常用Photoshop或其他照片编辑软件做的事情，比如改变不透明度或亮度，以及更多。
你使用filter 属性。这里是一个应用于图像的例子，但这个属性可以用在任何元素上。
img {
filter: <something>;
}
你可以在这里使用各种数值。
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()sepia()saturate()url()
注意每个选项后面的括号，因为它们都需要一个参数。
比如说。
img {
filter: opacity(0.5);
}
表示图像将是50%的透明，因为opacity() ，需要一个从0到1的值，或者一个百分比。
你也可以一次应用多个过滤器。
img {
filter: opacity(0.5) blur(2px);
}
现在让我们来谈谈每个过滤器的细节。
blur()
模糊一个元素的内容。你传给它一个值，用px 或em 或rem 表示，它将被用来决定模糊的半径。
例子。
img {
filter: blur(4px);
}
opacity()
opacity() 取一个从0到1的值，或一个百分比，并根据它决定图像的透明度。
0, 或0%, 表示完全透明。1, 或100%, 或更高，表示完全可见。
例子。
img {
filter: opacity(0.5);
}
CSS也有一个opacity 属性。然而，filter 可以通过硬件加速，这取决于实现，所以这应该是首选方法。
drop-shadow()
drop-shadow() 显示元素后面的阴影，它跟随alpha通道。这意味着，如果你有一个透明的图像，你会得到一个应用于图像形状的阴影，而不是图像框。如果图像没有alpha通道，阴影将被应用到整个图像框。
它接受最少2个参数，最多5个。
- offset-x设置水平偏移。可以是负数。
- offset-y设置垂直偏移。可以是负数。
- blur-radius，可选，设置阴影的模糊半径。默认为0，没有模糊。
- spread-radius，可选的，设置扩散半径。单位是
px,rem或em - color，可选，设置阴影的颜色。
你可以在不设置扩散半径或模糊半径的情况下设置颜色。CSS理解该值是一个颜色，而不是一个长度值。
例如。
img {
filter: drop-shadow(10px 10px 5px orange);
}
img {
filter: drop-shadow(10px 10px orange);
}
img {
filter: drop-shadow(10px 10px 5px 5px #333);
}
grayscale()
让元素有一个灰色的颜色。
你传递一个从0到1的值，或者从0%到100%的值，其中1和100%意味着完全的灰色，而0或0%意味着不触及图像，保留原始颜色。
例子。
img {
filter: grayscale(50%);
}
sepia()
使元素具有棕褐色的颜色。
你传递一个从0到1的值，或者从0%到100%的值，其中1和100%意味着完全的棕褐色，而0或0%意味着图像没有被触动，原始颜色保持不变。
例子。
img {
filter: sepia(50%);
}
invert()
颠倒一个元素的颜色。颠倒一个颜色意味着在HSL色轮中寻找一个颜色的反面。如果你不知道那是什么意思，就在谷歌上搜索 "色轮"。例如，黄色的对面是蓝色，红色的对面是青色。每一种颜色都有一个反面。
你通过一个数字，从0到1或从0%到100%，决定了反转的数量。1或100%意味着完全反转，0或0%意味着没有反转。
0.5或50%将总是呈现50%的灰色，因为你总是在轮子的中间位置结束。
例子。
img {
filter: invert(50%);
}
hue-rotate()
HSL色轮是用度数表示的。使用hue-rotate() ，你可以使用正或负的旋转来旋转颜色。
该函数接受一个deg 的值。
例子。
img {
filter: hue-rotate(90deg);
}
brightness()
改变一个元素的亮度。
0或0%给出一个全黑的元素。 1或100%给出一个没有变化的图像。
高于1或100%的值使图像更亮，直至达到全白元素。
例子。
img {
filter: brightness(50%);
}
contrast()
改变一个元素的对比度。
0或0%给出一个完全的灰色元素。 1或100%给出一个没有变化的图像。
大于1或100%的值会产生更多的对比度。
例子。
img {
filter: contrast(150%);
}
saturate()
改变一个元素的饱和度。
0或0%给出一个全灰度的元素（饱和度较低）。 1或100%给出一个不变的图像。
大于1或100%的值给出更多的饱和度。
例子。
img {
filter: saturate();
}
url()
这个过滤器允许应用一个在SVG文件中定义的过滤器。你指向SVG文件的位置。
例子：
img {
filter: url(filter.svg);
}
SVG滤镜不在本书的范围内，但你可以在Smashing杂志的帖子中阅读更多内容：https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/
