大家都知道，当一些的哀悼日或者重要人物逝世时我们的网站可能需要置灰来表达一种悼念之情，像是这样：
这个时候各大网站首页的色调都不再是之前的五彩绚烂，而是变成庄严沉重的灰黑色。当然，这个庄严沉重的灰黑色不是指我们把之前整个网页五彩绚烂主题给换了一遍，全站置灰是非常简单的事情，我们仅仅需要使用一行 CSS，就能实现整个网站的置灰效果。
像是这样，我们仅仅需要在样式中给html元素添加一个统一的滤镜属性即可：
<style>
html {
filter: grayscale(1); // 0-1强度逐渐变大
}
</style>
在 CSS 中，我们无需借助任何软件也可以实现很多种滤镜效果，例如
模糊效果、透明效果、色彩反差调整、色彩反相等等, 除了grayscale，下面介绍filter属性的其他几个滤镜效果。
1. drop-shadow() 🧐
drop-shadow() 函数对输入图像应用阴影效果。
语法：drop-shadow(h-shadow v-shadow blur spread color) 其中：
- h-shadow：水平方向距离
- v-shadow：垂直方向距离
- blur spread：值越大，越模糊
- color：为阴影添加颜色
filter: drop-shadow(10px 10px 10px red);
2. blur() 🧐
blur()给图像设置高斯模糊
语法：blur(px) 其中：像素值越大越模糊。
filter: blur(10px);
3. brightness()🧐
brightness() 函数将线性乘法器应用于输入图像，使其看起来或多或少地变得明亮
语法：brightness(%) 其中：默认值为 1,保持不变。值为 0% 将创建全黑图像。如果值大于 1 提供更明亮的结果。
filter: brightness(2);
4. contrast()🧐
contrast() 函数可调整输入图像的对比度。
语法：contrast(%) 其中：默认值为 1,保持不变。值为 0% 将创建全黑图像。如果值大于 1 意味着会运用更低的对比。
filter: contrast(2);
5. opacity()🧐
opacity() 转化图像的透明程度
语法：opacity(%) 其中：值的范围为0-1。值为0则是完全透明，值为1则图像无变化，默认值为1。
filter: opacity(0.3);
