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()