CSS3filter(滤镜)属性，filter属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。
CSS3filter实例
修改所有图片的颜色为黑白(100%灰度):
img{
-webkit-filter:grayscale(100%);/*Chrome,Safari,Opera*/
filter:grayscale(100%);
}
尝试一下»
定义和使用
默认值: none
继承: no
动画支持: 是。详细可查阅CSS动画
版本: CSS3
JavaScript语法: object.style.WebkitFilter="grayscale(100%)"尝试一下»
浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号。
紧跟在数字后面的-webkit-为指定浏览器的前缀。
CSS3filter属性
filter 18.0-webkit- 不支持 35.0 6.0-webkit- 15.0-webkit-
注意:旧版InternetExplorer浏览器(4.0to8.0)支持的非标准"filter"属性已被废弃。IE8及更低版本浏览器通常使用opacity属性。
CSS语法
filter:none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
提示:使用空格分隔多个滤镜。
Filter函数
注意:滤镜通常使用百分比(如：75%),当然也可以使用小数来表示(如：0.75)。
Filter 描述
none 默认值，没有效果。
blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；
如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
brightness(%) 给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。
contrast(%) 调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
总之，CSS3filtercss3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,h5时代的来临,我们可以通过css对图像进行处理。