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)；比如在某宝首页中就可以有如下的效果对比了

　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。