写页面的时候由于页面风格原因，可能需要图片变灰色，如果用图片处理软件的话可能会比较麻烦，而且会增加图片的数量，不利于资源的合理利用。
下面提供两种方法：
1、使用CSS的 filter: gray; 属性即可实现灰度效果。
Chrome内核的浏览器只需要一行属性代码即可：
filter: grayscale(100%);
HTML部分代码：
<img src="img/qingxin.png" alt=""> <img class="g" src="img/qingxin.png" alt="">
为了形成对比，我把图片引入两次，其中一个添加了一个class g ，用来给它设置样式。
CSS部分代码，为了保证兼容性，可以写成：
img {
width: 300px;
}
.g {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
如果需要整站变灰可以直接使用下方代码：
* {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
首先给图片设置一个宽度，再给其中一个设置灰度属性。
效果如下：
给 <body> 标签添加属性，可以实现整站变灰效果。
网上说的其中的 filter: gray; 就是兼容IE的，不过我试着好像不行，可以使用第二种方法。
2、利用 grayscale.js 实现图片的灰度效果。方法很简单：
a. 引入js文件：
<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>
但是这个链接好像被墙了。。。可以引入我网站的链接：
<script src="http://cdn.w3h5.com/down/source/js/grayscale.js"></script>
您可以直接下载 js 文件引入 下载链接：点击下载 grayscale.js
在 script 标签内添加一行：
grayscale(document.getElementById("g"));//通过ID调用
或DOM元素集：
grayscale(document.getElementsByTagName("img"));
也可以使用JQuery调用：
grayscale($("#g"));
需要注意的是：
Grayscale.js 是模仿微软专有的“ 灰度 ”过滤器的实验性尝试（在大多数IE版本中都可用）。在Opera 9，FF2 / 3，Safari 4，IE6 / 7中测试可用。
它可能不适用于Safari 4和Chrome，因为它们不支持 CanvasContext.getImageData（因为图像不能灰度化）。
实现原理：IE浏览器下是添加灰度滤镜，这个大家都懂的。其他浏览器貌似使用Canvas中的getImageData方法，然后对每个像素点进行灰度转换~~
因此，在现代浏览器下，对于该方法，图片的灰度处理有两个局限性：
1. 速度：300*300这张一般般大小的图片变灰就要数秒之久；
2. 跨域：安全性机制，无法转换跨域的图片为黑白色。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/231192.html