使用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"));