js 将图片置灰_将图片转换成黑白(灰色)的css和js的方法

我们在做网站前端时，有时会碰到需要将图片变成黑白或者灰色的需求，比如商品缺货时，将图片置成灰色是一个很好的用户体验。那么如何将图片转换成黑白呢？我们通过程序调用不同的图片就很容易实现，但这种做法的缺点是同一种图片需要制作两张图片，一种是正常的图片，一种是灰色的图片。这样势必很繁琐。今天给大家介绍的是通过CSS来实现这一效果。实现的方式主要有以下几种：

CSS3 greyscale 滤镜实现

css代码：

.gray {

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: grayscale(100%);

filter: gray;

}

HTML代码：

SVG滤镜实现

我们新建一个空白文本文件，比如说：gray.txt. 拷贝进去如下的XML代码：

然后，修改后缀.txt