往期链接:

「CSS奇技淫巧之滤镜」

「CSS奇技淫巧之滤镜（二）」

前言

filter

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

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

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

grayscale

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

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

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

invert

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

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

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

• 原图

• 反转后的图片

opacity

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

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

saturate

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

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

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