CSS的滤镜

CSS3的滤镜

1、什么是滤镜：

定义：对图像、图像进行的视觉处理(模糊、饱和度、对比度等)

2、滤镜的实现：

增加filter属性

3、常用的滤镜函数：

（1）模糊效果：blur(number),number越大图像越模糊

（2）设置图像的亮度：brightness(number)，number越大图像越亮,number不能取负值。可以是整数也可以是百分比   

（3）图像的对比度：contrast(number)

（4）阴影效果：drop-shadow(args1 args2 args3 args4)，作用类似CSS中的box-shadow属性

         args1：阴影水平偏移量

         args2：阴影的垂直偏移量

         args3：阴影的模糊半径

         args4：阴影的颜色

（5）图像的灰度转换：grayscale(number)

（6）图像反转：invert()

注意：图像反转指的是图像的颜色反转，而不是物理位置的反转

（7）图像的不透明度：opacity()

取值在0~100之间，注意opacity是不透明度，为100时图片或者背景是不透明的，取值为0时，背景或图片是透明的

（8）图像转换为棕褐色：sepia()

（9）图像的饱和度：saturate()