css滤镜

1.语法

filter: none | blur()  | brightness()  | contrast()  | drop-shadow()  | grayscale()  | hue-rotate()  | invert()  | opacity()  | saturate()  | sepia()  | url();

我们来上效果，一目了然。

滤镜效果点击：https://jianxiujiucan.github....

这些滤镜不仅可以单独使用，而且还可以组合起来使用。
例如：

.filter{
    filter: brightness(.9) contrast(1.2) saturate(1.3);
}

效果如下：

图片明艳不少了，简直是弱鸡版的美图秀秀！
https://codepen.io/jianxiujiu...

再结合CSS的混合模式使用，简直王炸啊。来看看这个效果：

img{
    filter: brightness(3) invert(1) grayscale(1);
    mix-blend-mode: difference;
}

图片处理之后竟然有一种“独钓寒江雪”的感觉了。

https://codepen.io/jianxiujiu...