首页 > 代码库 > 将图片转换成黑白(灰色、置灰)
将图片转换成黑白(灰色、置灰)
网站图片置灰现在已经很常见了，最近上网找了些资料，基本都是用css3 grayscale和grayscale.js，做了测试，发现用CSS或greyscale.js都不能完全兼容。
测试浏览器版本：google、google、firefox、opera、safari、IE7-9
css3 grayscale很多都是用这段CSS：
-webkit-filter: grayscale(100%);/*兼容google、opera*/ -moz-filter: grayscale(100%);/*FF下不生效*/ -ms-filter: grayscale(100%);/*IE下不生效*/ -o-filter: grayscale(100%);/*opera下不生效*/ filter: grayscale(100%); filter: gray;/*兼容IE7-IE9，IE10不支持*/
测试结果如上面代码注释所示。
自己做了一番测试。先不废话，上代码和测试结果：
1.方法1：CSS3 grayscale滤镜实现。
只兼容google、opera、IE7-9
代码：
<!DOCTYPE html><head> <title></title> <style type="text/css"> .gray { -webkit-filter: grayscale(100%);/*兼容google、opera*/ filter: gray;/*兼容IE7-IE9，IE10不支持*/ } </style></head><body> <img src="button.png" class="gray"></body></html>
注意：要在需要变灰的img上加上类gray，再在.gray{}中写CSS。不能把CSS写在html{}中（因为在IE7-9中不支持）.例如下面所示：
<!DOCTYPE html><head> <title></title> <style type="text/css"> html{ -webkit-filter: grayscale(100%);/*兼容google、opera*/ filter: gray;/*兼容IE7-IE9，IE10不支持*/ } </style></head><body> <img src="button.png" class="gray"></body></html>
2.方法2：只使用grayscale.js
只兼容google、opera、safari、firefox、IE9-10。 IE7-8不兼容！
代码：
<!DOCTYPE html><head> <title></title></head><body> <img src="button.png" class="gray"></body><script type="text/javascript" src="js/jquery-1.8.3.js"></script><script type="text/javascript" src="js/grayscale.js"></script><script type="text/javascript"> $(function(){ grayscale(document.getElementsByTagName("img")); });</script></html>
grayscale.js的下载地址：
http://www.bvbcode.com/cn/e0nx8py7-890221
综上所述：
结合第1种的CSS和第2种的grayscale.js使用，就可以兼容主流浏览器。我只测试了：google、firefox、safari、opera、IE7-10。
完整代码：
<!DOCTYPE html><head> <title></title> <style type="text/css"> .gray { -webkit-filter: grayscale(100%);/*兼容google、opera*/ filter: gray;/*兼容IE7-IE9，IE10不支持*/ } </style></head><body> <img src="button.png" class="gray"></body><script type="text/javascript" src="js/jquery-1.8.3.js"></script><script type="text/javascript" src="js/grayscale.js"></script><script type="text/javascript"> $(function(){ grayscale(document.getElementsByTagName("img")); });</script></html>
如有其他更好方法，欢迎留言讨论。
将图片转换成黑白(灰色、置灰)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。