CSS3的filter(滤镜)属性详解

1、blur模糊

blur的效果顾名思义就是模糊，单位是px，例如：filter:blur(10px)效果如下，左为原图，右为使用blur的效果图：

当blur(100px)时可以看到图片几乎看不到了

这个值必须为正值，为负值时没有任何效果，如blur(-100px)：

2、opacity透明度

效果和opacity属性一致，数值在0-1之间，当为0是看不到，1为正常显示，当filter:opacity(0.5)时效果如下图右，左为原图

当opacity(0.1)如下：

3、grayscale透明度

grayscale效果是使图片变灰，数值在0-1之间，1表示完全变灰，成了黑白照片，0表示没有效果，当filter:grayscale(0.5)时效果如下图右

可能效果不是很明显，当我们设为1时grayscale(1)时，如下，这就很有年代感

4、sepia褐色

sepia的效果是变为褐色，数值在0-1之间，1表示完全变褐，0表示没有效果，这很适合于打造复古风格、怀旧风格，sepia(0.5)效果如下图右：

sepia(1)效果如下，给人一种怀旧的感觉，感觉想要回到80、90年代一样

5、saturate饱和度

饱和度是指颜色的纯度，saturate的取值为大于或等于0的数值，当filter:saturate(0)时，效果和grayscale(1)效果一样，如下图右：

saturate(1)时，效果与原图一样：

saturate(5)时，效果如下：

6、invert反转颜色

数值取值是在0-1或者是0-100%，当为1或100%时为完全反转，所谓的颜色反转就是255减去颜色的rgb中的各个值，所以白色rgb(255,255,255)反转invert(100%)就是黑色rgb(0,0,0)：

所以蓝色rgb(0,120,215)反转invert(100%)后就是rgb(255,135,40)

这个可以得出一个公式：反转后颜色值=(255-当前颜色值) X invert数值+当前颜色值 X （1-invert数值），如rgb(0,120,215)使用invert(80%)就是r=(255-0)X0.8+0X(1-0.8)=204，g=(255-120)X0.8+120X(1-0.8)=132，b=（255-215）X0.8+215X(1-0.8)=75，所以得rgb(204,132,75)

上面的图片使用invert(100%)后的效果如下图右，一种照片底片的效果：

7、brightness亮度

取值为数字或百分数，当取值为1时，与原图一致，当取值为0或者负数是为全黑，当取值为0-1时，亮度降低，当取值大于1时，亮度增大，brightness(0)效果如下图右：

brightness(0.5)效果如下图右：

brightness(1)效果如下图右：

brightness(5)效果如下图右：

8、contrast对比度

取值为大于或等于0的数字或百分数，当取值为1时，与原图一致，当取值为0-1时，对比度降低，当取值大于1时，对比度增大，contrast(0)效果如下图右：

contrast(0.2)效果如下图右：

contrast(1)效果如下图右：

contrast(5)效果如下图右：

9、drop-shadow阴影

drop-shadow和box-shadow很像，是添加阴影，drop-shadow(10px 10px red)效果如下图右：

10、hue-rotate色相旋转

取值是角度，单位是deg，这个是根据色轮对颜色进行调整，Adobe有一个色轮在线配色网站

https://kuler.adobe.com/，如hue-rotate(120deg)效果如下图右：

hue-rotate(260deg)效果如下图右， 这一抹绿真是让人不经意想起里约奥运会泳池里的水呀┑(￣Д ￣)┍：