这篇文章主要介绍了如何使用css给图片或者网页添加滤镜，将色彩的网页变成黑白色。

需求

网站要求所有图片去掉色彩。

实现方法

1
2
3
4
5
6
7
8
9
10
/*给需要加滤镜的元素或图片添加 CSS3 greyscale 滤镜实现*/
html,body {
        filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: gray
    }

原理

1
2
3
4
5
6
7
8
9
10
11
12
/* BasicImage，调整对象的内容的颜色处理、图像旋转或不透明度 */
filter:progid:DXImageTransform.Microsoft.BasicImage(Grayscale='x', Xray='x', Mirror='x', Invert='x', Opcity='x', Rotation='x')

/*
GrayScale ，设置或调整对象的灰度值。
Invert ，设置或调整对象的反相。
Opacity ，设置或调整对象的不透明度。
Mask ，设置或调整对象的的RGB是否为MashColor值，0默认值，显示正常RGB值，1表示改变内容为MashColor（不常用）
Mirror ，设置或调整对象镜像。0正常显示，1内容对象将翻过来。
Rotation ，设置或调整对象旋转，0正常显示，1代表旋转90°，2代表旋转180°，3代表旋转270°
XRay ，设置或调整对象的X射线，布尔值，0正常显示，1代表X射线，有点像我们去医院拍X光一样的效果。
*/
1
2
3
4
5
6
7
8
9
10
/* grayscale() : 对图片进行灰度转换, 它是 <filter-function> 的子属性 */
grayscale(amount)

/*
转换值的大小, 可以是<number> 或 <percentage>. 当值为100%时, 灰度最大. 0%时与原图没有区别. 0% 到 100% 之间的值会使灰度线性变化. amount 为空时会自动插入0。
*/

grayscale(0)     /* 无效果 */
grayscale(.7)    /* 70% 灰度 */
grayscale(100%)  /* 灰度最大 */

参考

IE中CSS-filter滤镜小知识大全

grayscale()