—引导—
在CSS3中，有一个强大的属性，那就是filter属性，filter顾名思义就是“滤镜”的意思，用filter属性可以让图片无需PS处理就达到一些简单的显示效果。
—定义和使用—
filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。
—浏览器支持—
表格中的数字表示支持该方法的第一个浏览器的版本号。
紧跟在数字后面的 -webkit- 为指定浏览器的前缀。
—CSS 语法—
filter:none| blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()
—Filter 函数—
注意:滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。
—实例—
none:没有任何属性。
【高斯模糊】.blur {-webkit-filter: blur(4px);filter: blur(4px);}
【明暗度】.brightness {-webkit-filter: brightness(0.30);filter: brightness(0.30);}
【对比度】.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
【灰度】.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
【色相旋转】.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
【反相】.invert {-webkit-filter: invert(100%);filter: invert(100%);}
【透明度】.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
【饱和度】.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
【深褐色】.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
【阴影】 .shadow {-webkit-filter: drop-shadow(8px 8px 10px #000);filter: drop-shadow(8px 8px 10px #000);}
当然，多个属性一起用的话，可以写在一起：比如.multiply{-webkit-filter:drop-shadow(8px 8px 10px #000) hue-rotate(500deg) grayscale(0.3) invert(0.2) brightness(1.2);}，以上属性可以配合background属性使用，能达到更加理想的效果。
—后记—
filter属性目前只支持对于img的设置，对于background-image不支持此属性，要达到背景虚化效果可以考虑把要做背景虚化的图片放在父级div中，设置其属性为position：absolute；再去设置相应的视觉效果。
以后有新内容我会再补充。
参考文章：/cssref/css3-pr-filter.html
/wangxiaosan/p/5933670.html
