前言

filter

首先，我们还是和往常一样，先来一张原图。

// html
<img class="filter" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/58bccb7dbd7d4a4e81d21d05b1cff64c~tplv-k3u1fbpfcp-zoom-1.image">

将图片转换为灰度图。参数可以是数字或者百分比。为0(0%)时，图片不发生变化，为空时值为1。

// css 
.filter { 
    filter: grayscale(.6)    /* 60% 灰度 */
}

如上图就是转换后的图片。

反转图片的色调。同样参数可以是数字或者百分比，为0(0%)时，图片不发生变化，为1（100%）时，图片颜色完全反转。

// css 
.filter { 
    filter: invert(100%);
}

这里就不用上图了，换一张图片，因为上图反转过来颜色，看着有点阴森森的(Θ～Θ〃)。

改变图片的透明度。和我们平常用的opacity属性一样，区别在于，使用filter的性能更好一点(￣▽￣)~*。参数和上面两个一面，为0（0%）时，完全透明，为1时不变化。

// css 
.filter { 
    filter: opacity(.5);
}

增加或者降低图片的饱和度。高于1（100%）会增加图片的饱和度，反之，低于1（100%）会降低图片的饱和度。

// css 
.filter { 
    filter: saturate(4);
}

好，今天就到这里了，今天努力的你依然是最棒的。加油，加油，你最棒！加油，加油，你最强！哦豁，Bye Bye！！！