&nbs p;
//zxx: 最近很积极地折腾手机页面的些东西，加上其他一些人生重要的事，所以木有更新。
可能早就知道，像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的( filter: gray; )，不过，当时，其他浏览器是无解的。不过，时代发展，如今， CSS 3的 逐步 推进，我们也 开始 看到“黑白效果”大规模应用于实际的可能。
CSS3 greyscale 滤镜实现
如下测试代码：
.gray { - webkit -filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; } HTML 代码：
< img src="mm1. jpg " /> <img src="mm1.jpg" class="gray" />
如果你手上的浏览器是Ch rom e18+, 您可以狠狠地点击这里：CSS3 greyscale 滤镜与照片黑白
可以看到类似 文章 一开始展示的黑白对比效果图。
其他些浏览器，如FireFox很快就会跟上实现。当然，要实现（比方说）FireFox 4浏览器上照片变黑白的效果，也是可以的。可以使用SVG的灰度滤镜效果。
SVG滤镜实现
我们新建一个空白文本文件，比如说： gray.txt . 拷贝进去如下的 XM L代码：
<svg version="1.1" x ML ns="http://www.w3. org /2000/svg"> <filter id="grayscale"> <feColorMatrix ty PE ="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>
然后，修改后缀 .txt → .svg . 然后就可以调用了~~
如下CSS调用代码：
filter: url(gray.svg # grayscale);
然后，效果就出来了。如果你手上的浏览器是FireFox4+，您可以狠狠地点击这里：SVG滤镜实现照片黑白demo
别忘了IE浏览器
IE下实现上面已经提过，就是：
filter: gray;
至少IE7~9都是支持的。最近较懒，IE6懒得去测，支持与否不知。经验来看， 应该 是支持的。
我需要一个一统江山的方法
一统江山（完全兼容），如果单纯想通过CSS，也是可以的，你所要做的就是：天天拿个鱼竿去黄浦江钓鱼，年复一年，日复一日……然后，两年后，只要两年，把上面两个demo页面F5一下，就可以了！很 简单 吧！
如果嫌上面的做法过于伦敦，且你也不是一根筋，到是有个一统江山的方法， 不过 不是CSS的干货，一个貌似有点名气的Greyscale.js。
用法很简单，引用JavaScript文件，如下：
<script src="http://j am es.padolsey .COM /demos/grayscale/grayscale.js"></script>
然后，一句话：
grayscale(document.getElementById("thisImage")); 或DOM元素集：
grayscale(document. getelementsbytagname ("img")); 如果你喜欢使用 jq uery，还可以使用：
grayscale($("#thisImage")); 很简单吧。
实现原理 ：IE浏览器下是添加灰度滤镜，这个大家都懂的。其他浏览器貌似使用Canvas中的 getImageData 方法，然后对每个像素点进行灰度转换~~
因此，在现代浏览器下，对于该方法，图片的灰度处理有两个局限性：
1. 速度 。300*300这张一般般大小的图片变灰就要数秒之久；
2. 跨域 。安全性机制，无法转换跨域的图片为黑 白色 。
您可以狠狠地点击这里：Greyscale.js照片变灰兼容性实现demo
截图跟上面的一致，略。
补充于2015年12月21日
很多人邮件问，IE10, IE11这两个高不成低不就的浏览器怎么办？
我个人都是借助SVG实现（专门为IE10 -i E12）的，讲毛玻璃效果的时候有类似实现。
1. 页面 载入 （可以请求载入， 或者 直接放在HTML代码中）上面gray.txt对应的SVG文件，也就是：
<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>
2. 然后将图片转为SVG图片引用， filter 属性值指向 grayscale (上面 红色 的 id 值)。例如
<svg> <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink: hr ef="zxx.jpg" x="0" y="0" width="256" h ei ght="190" filter="url('#grayscale') "></image> </svg> over~
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-小tip: 使用CSS将图片转换成黑白(灰色、置灰) 全部内容，希望文章能够帮你解决 html5教程-小tip: 使用CSS将图片转换成黑白(灰色、置灰) 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-小tip: 使用CSS将图片转换成黑白(灰色、置灰)的详细内容...