使用CSS将图片转换成黑白(灰色、置灰)

1、CSS3 greyscale 滤镜

<img src="mm1.jpg" />
<img src="mm1.jpg" class="gray" />
.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}

2、SVG滤镜

新建一个gray.svg文件,拷贝进去如下的XML代码:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>

CSS调用代码：

filter: url(gray.svg#grayscale);

3、IE浏览器(IE7~9都是支持的)

css   filter: gray;

4、一统江山（完全兼容）

引用
<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>
HTML代码：
<img src="/image/study/s/s256/mm1.jpg" />
<img src="/image/study/s/s256/mm1.jpg" id="gray" />
JS代码：
grayscale(document.getElementById("gray"));
jq代码：
grayscale($("#thisImage"));