css--filter(滤镜) 属性
前言
前段时间找工作面试官问到一个问题，你如何将一个网页整体置灰？面试遇到这样的问题，一下束手无策，之前没有接触过这样的需求，因此没有回答上来，面试结束我才知道了这是考查对 CSS3 的新属性的了解。这里需要掌握 filter(滤镜) 这个新属性。细想一下，这个需求成立啊，比如遇到清明节、全国哀悼日、大地震等灾害的日子，我们的网页可以全局置灰，相当于加一层滤镜，以表示我们对逝者的悼念。
正文
1.定义和使用
filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。本文用谷歌浏览器测试，暂不烤炉兼容问题。
语法：
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
注意：可以使用空格分割加多个滤镜。
默认值：none；不加任何效果。
2.filter函数使用
基础代码如下：
<div> <img src="./图片/2222.jpeg" alt=""> <img src="./图片/2222.jpeg" alt=""> <img src="./图片/2222.jpeg" alt=""> <img src="./图片/2222.jpeg" alt=""> </div> <style> div{ display: flex; justify-content: space-around; width: 500px; margin: 100px auto; } img{ width: 100px; } </style>
基础效果如下：
（1）blur()，该函数给图像设置模糊度，默认值为0，可以设置长度值，但是不能设置百分比。
img:nth-child(1) {} img:nth-child(2) { filter: blur(2px); } img:nth-child(3) { filter: blur(4px); } img:nth-child(4) { filter: blur(6px); }
（2）brightness()，图片高亮显示，使得图片看起来更亮或者更暗，参数为0%，图片会全黑；参数为100%，图片无变化；参数越大，图片越亮；默认值为100%。通常为75%达到滤镜效果，同时也可以用小数作为参数（如0.75）。
img:nth-child(1) {} img:nth-child(2) { filter: brightness(0%) } img:nth-child(3) { filter: brightness(75%) } img:nth-child(4) { filter: brightness(125%) }
（3）contrast()，调整图像对比图，参数为0%，图像全黑；参数为100%，图像不变；参数越大，表示对比越低；默认值为100%。
img:nth-child(1) {} img:nth-child(2) { filter: contrast(0%) } img:nth-child(3) { filter: contrast(75%) } img:nth-child(4) { filter: contrast(125%) }
（4）drop-shadow(h-shadow v-shadow blur spread color) ，给图像设置一个阴影效果，阴影是合成在图像下面，可以又模糊度的，可以以特定的颜色色画出遮罩图的偏移版本，该函数与box-shadow属性相似，不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。具体参数设置如下：
h-shadow和v-shadow，两个参数是必选的，表示阴影偏移量，分别在水平方向和垂直方向的便宜距离，同样设置负值的时候会出现相反的方向。
blur，该参数可选，表示模糊程度，值越大越模糊，则阴影会变大更大更淡，不允许负值，默认是为0表示阴影的边界很锐利。
spread，该参数可选，正值会使阴影扩张和变大，负值会使阴影缩小，默认值为0表示阴影与元素一样大小。
color，该参数可选，表示阴影的颜色，若未设定，颜色基于浏览器。
img:nth-child(1) {} img:nth-child(2) { filter: drop-shadow(20px 10px 4px #4444dd); } img:nth-child(3) { filter: drop-shadow(0 -6mm 4mm rgb(160, 0, 210)); } img:nth-child(4) { filter: drop-shadow(0 0 0.75rem crimson); }
（5）grayscale()，将图像转为灰度图像，值定义转换的比例，值为1--%表示全部转换为灰度，值为0表示图像无变化。
img:nth-child(1) {} img:nth-child(2) { filter: grayscale(30%); } img:nth-child(3) { filter: grayscale(60%); } img:nth-child(4) { filter: grayscale(100%); }
（6）hue-rotate()，该函数给图像添加色相旋转，参数为角度值deg，值为0deg，表示图像无变化；360deg表示图像色相旋转一圈；超过360deg相当于又绕一圈；默认值为0deg。
img:nth-child(1) {} img:nth-child(2) { filter: hue-rotate(90deg); } img:nth-child(3) { filter: hue-rotate(180deg); } img:nth-child(4) { filter: hue-rotate(450deg); }
（7）invert()，该函数反转输入图像，参数值定义转换比例，参数为100%表示完全反转；参数为0%表示无变化，值在0%-100%之间。默认值为0%。
img:nth-child(1) {} img:nth-child(2) { filter: invert(30%); } img:nth-child(3) { filter: invert(60%); } img:nth-child(4) { filter: invert(100%); }
（8）opacity()，该函数转化图像的透明度，值定义转化比例。值为0%表示图像完全透明；值为100%表示图像无变化；值在0%-100%之间。默认值为100%。
img:nth-child(1) {} img:nth-child(2) { filter: opacity(30%); } img:nth-child(3) { filter: opacity(60%); } img:nth-child(4) { filter: opacity(100%); }
（9）saturate()，该函数设置图像饱和度，值定义转化比例，值为0%则是完全不饱和，值为100%表示图像无变化；值在0%-100%之间。默认值为100%。
img:nth-child(1) {} img:nth-child(2) { filter: saturate(0%); } img:nth-child(3) { filter: saturate(30%); } img:nth-child(4) { filter: saturate(60%); }
（10）sepia()，该函数将图像转化为深褐色，之定义转化比例，值为100%表示完全深褐色，值为0%表示图像无变化；值在0%-100%之间。默认值为0%。
img:nth-child(1) {} img:nth-child(2) { filter: sepia(30%); } img:nth-child(3) { filter: sepia(60%); } img:nth-child(4) { filter: sepia(100%); }
写在最后
有了上面的知识储备，实现面试官这个需求就不难了，一行代码解决 filter: grayscale(1)；比如在某宝首页中就可以有如下的效果对比了
以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。
