CSS3 filter(滤镜) 属性
filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。
定义和使用
| 默认值 | none |
|---|---|
| 继承 | no |
| 动画支持 | 是。详细可查阅 CSS 动画 |
| 版本 | CSS3 |
| JavaScript 语法 | object.style.WebkitFilter="grayscale(100%)" |
CSS 语法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();提示: 使用空格分隔多个滤镜。
Filter 函数
注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。查看相关函数使用
示例
修改所有图片的颜色为黑白 (100% 灰度):
img { ???-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ ???filter: grayscale(100%);}这意味着当你有彩色logo图片时，UI就不必再制作灰色的logo了。
参考文档
查看浏览器支持
css: CSS3 filter(滤镜) 的使用
原文地址：https://www.cnblogs.com/gaollard/p/10252917.html