时代发展，如今，CSS3的逐步推进，我们也开始看到“黑白效果”大规模应用于实际的可能,接下来介绍CSS3 greyscale 滤镜实现，感兴趣的朋友可以了解下可能早就知道，像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;)，不过，当时，其他浏览器是无解的。不过，时代发展，如今，CSS3的逐步推进，我们也开始看到“黑白效果”大规模应用于实际的可能。 
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代码：
代码如下:
立即学习“前端免费学习笔记（深入）”；
登录后复制
如果你手上的浏览器是Chrome18+, 您可以狠狠地点击这里：CSS3 greyscale 滤镜与照片黑白⤴
可以看到类似文章一开始展示的黑白对比效果图。
其他些浏览器，如FireFox很快就会跟上实现。当然，要实现（比方说）FireFox 4浏览器上照片变黑白的效果，也是可以的。可以使用SVG的灰度滤镜效果。
SVG滤镜实现
我们新建一个空白文本文件，比如说：gray.txt. 拷贝进去如下的XML代码：
代码如下:
立即学习“前端免费学习笔记（深入）”；
登录后复制
然后，修改后缀.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文件，如下：
然后，一句话：
grayscale(document.getElementById(“thisImage”));或DOM元素集：
grayscale(document.getElementsByTagName(“img”));如果你喜欢使用jQuery，还可以使用：
grayscale($(“#thisImage”));很简单吧。
实现原理：IE浏览器下是添加灰度滤镜，这个大家都懂的。其他浏览器貌似使用Canvas中的getImageData方法，然后对每个像素点进行灰度转换~~
因此，在现代浏览器下，对于该方法，图片的灰度处理有两个局限性：
1. 速度。300*300这张一般般大小的图片变灰就要数秒之久；
2. 跨域。安全性机制，无法转换跨域的图片为黑白色。
以上就是使用CSS将图片转换成黑白的的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2901840.html
