html怎么让图片变灰色,利用CSS设置图片黑白/灰色效果，同时适用于整站变灰

写页面的时候由于页面风格原因，可能需要图片变灰色，如果用图片处理软件的话可能会比较麻烦，而且会增加图片的数量，不利于资源的合理利用。

下面提供两种方法：

1、使用CSS的 filter: gray;  属性即可实现灰度效果。

Chrome内核的浏览器只需要一行属性代码即可：filter: grayscale(100%);

HTML部分代码：

为了形成对比，我把图片引入两次，其中一个添加了一个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;

}

首先给图片设置一个宽度，再给其中一个设置灰度属性。

效果如下：

给

标签添加属性，可以实现整站变灰效果。

网上说的其中的 filter: gray; 就是兼容IE的，不过我试着好像不行，可以使用第二种方法。

2、利用 grayscale.js 实现图片的灰度效果。方法很简单：

a. 引入js文件：

但是这个链接好像被墙了。。。可以引入我网站的链接：

您可以直接下载 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. 跨域：安全性机制，无法转换跨域的图片为黑白色。