使用 css3 filter
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
filter的其他值
-
blur(px)
高斯模糊效果，毛玻璃的设置
-
brightness( % )
一种线性乘法，使其看起来更亮或更暗
-
contrast( % )
调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
-
drop-shadow(h-shadow v-shadow blur spread color)
给图像设置一个阴影效果。
阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。
函数接受(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。
该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。
-
hue-rotate(deg)
色相旋转
-
invert( % )
反转输入图像
-
opacity( % )
转化图像的透明程度
-
saturate( % )
转换图像饱和度
-
sepia( % )
转换为深褐色
-
url()
URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素
