CSS3 滤镜属性(filter)

滤镜属性

 定义元素(通常为图片)的可视效果
 img{filter:...;}

属性：

none 默认值,没有属性
blur
 设置图片的模糊度,单位px,不接受百分比,默认为0
 filter:blur(10px);

brightness
 设置图片的亮度,属性值为百分比,默认为1
 filter:brightness(100%);,可以超过100%

contrast
 设置图像的对比度,属性值为百分比,默认为1
 filter:contrast(100%);

drop-shadow
 设置图片的阴影
 filter:drop-shadow(1,2,3,4,5);
 参数1：x轴上的偏移量,px,正数向右偏移,负数向左偏移
 参数2：y轴上的偏移量,px,正数向下偏移,负数向上偏移
 参数3：模糊度,px,数值越大越模糊,不允许负数
 参数4：正数使阴影扩张和变大,负数使阴影缩小(Webkit, 以及一些其他浏览器 不支持第四个长度)
 参数5：阴影的颜色

grayscale
 将图片转换为灰度图片,属性值为百分比,默认为0
 filter:grayscale(100%);

hue-rotate
 给图像应用色相旋转,属性值为deg,默认为0
 filter:hue-rotate(360deg);

invert
 反转输入图像,属性值为百分比,默认为0
 filter:invert(100%); 100%为完全反转

opacity
 设置图像的透明度,属性为百分比,默认为1
 filter:opacity(100%);

saturate
 设置图像的饱和度,属性为百分比,默认为1
 filter:saturate(100%);可超过1

sepia
 将图片转化为深褐色,属性值为百分比,默认为0
 filter:sepia(100%);,最大值为1

url