CSS3新增了滤镜属性filter，总共定义了10种效果，filter目前的浏览器的兼容情况如下：
虽然IE不支持，但是这也不影响我们应该去了解一下这个超赞的属性，有了这个属性我们处理图片就更加得心应手了，filter定义的10种效果分别是：blur、opacity、grayscale、sepia、saturate、hue-rotate、invert、brightness、contrast、drop-shadow。
1、blur模糊
blur的效果顾名思义就是模糊，单位是px，例如：filter:blur(10px)效果如下，左为原图，右为使用blur的效果图，我非常怀疑今年朋友圈的红包照片微信团队就是这么干的：
blur(10px)
当blur(100px)时可以看到图片几乎看不到了
blur(100px)
这个值必须为正值，为负值时没有任何效果，如blur(-100px)：
blur(-100px)
2、opacity透明度
效果和opacity属性一致，数值在0-1之间，当为0是看不到，1为正常显示，当filter:opacity(0.5)时效果如下图右，左为原图
当opacity(0.1)如下：
opacity(0.1)
3、grayscale透明度
grayscale效果是使图片变灰，数值在0-1之间，1表示完全变灰，成了黑白照片，0表示没有效果，当filter:grayscale(0.5)时效果如下图右
grayscale(0.5)
可能效果不是很明显，当我们设为1时grayscale(1)时，如下，这就很有年代感
grayscale(1)，我是一张有故事的照片┑(￣Д ￣)┍
4、sepia褐色
sepia的效果是变为褐色，数值在0-1之间，1表示完全变褐，0表示没有效果，这很适合于打造复古风格、怀旧风格，sepia(0.5)效果如下图右：
sepia(0.5)
sepia(1)效果如下，给人一种怀旧的感觉，感觉想要回到80、90年代一样
sepia(1)
5、saturate饱和度
饱和度是指颜色的纯度，saturate的取值为大于或等于0的数值，当filter:saturate(0)时，效果和grayscale(1)效果一样，如下图右：
saturate(0)
saturate(1)时，效果与原图一样：
saturate(1)
saturate(5)时，效果如下：
saturate(5)
6、invert反转颜色
数值取值是在0-1或者是0-100%，当为1或100%时为完全反转，所谓的颜色反转就是255减去颜色的rgb中的各个值，所以白色rgb(255,255,255)反转invert(100%)就是黑色rgb(0,0,0)：
invert(100%)rgb(0,0,0)
所以蓝色rgb(0,120,215)反转invert(100%)后就是rgb(255,135,40)
rgb(0,120,215)invert(100%)
这个可以得出一个公式：反转后颜色值=(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)
rgb(0,120,215)invert(80%)
上面的图片使用invert(100%)后的效果如下图右，一种照片底片的效果：
invert(100%)
7、brightness亮度
取值为数字或百分数，当取值为1时，与原图一致，当取值为0或者负数是为全黑，当取值为0-1时，亮度降低，当取值大于1时，亮度增大，brightness(0)效果如下图右：
brightness(0)
brightness(0.5)效果如下图右：
brightness(0.5)
brightness(1)效果如下图右：
brightness(1)
brightness(5)效果如下图右：
brightness(5)
8、contrast对比度
取值为大于或等于0的数字或百分数，当取值为1时，与原图一致，当取值为0-1时，对比度降低，当取值大于1时，对比度增大，contrast(0)效果如下图右：
contrast(0)
contrast(0.2)效果如下图右：
contrast(0.2)
contrast(1)效果如下图右：
contrast(1)
contrast(5)效果如下图右：
contrast(5)
9、drop-shadow阴影
drop-shadow和box-shadow很像，是添加阴影，drop-shadow(10px 10px red)效果如下图右：
drop-shadow(10px 10px red)
10、hue-rotate色相旋转
取值是角度，单位是deg，这个是根据色轮对颜色进行调整，Adobe有一个色轮在线配色网站https://kuler.adobe.com/，如hue-rotate(120deg)效果如下图右：
hue-rotate(120deg)
hue-rotate(260deg)效果如下图右， 这一抹绿真是让人不经意想起里约奥运会泳池里的水呀┑(￣Д ￣)┍：
hue-rotate(260deg)
filter属性的10效果就介绍到这里啦，赶快去尝试一下吧！！！GO，GO，GO！
网友评论