网站图片置灰如今已经很常见了,最近上网找了些资料,基本都是用css3 grayscale和grayscale.js,作了测试,发现用CSS或greyscale.js都不能彻底兼容。javascript
测试浏览器版本:google、firefox、opera、safari、IE7-9css
css3 grayscale的,网上不少都是用这段CSS:html
-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不支持*/
测试结果如上面代码注释所示(咋这么多不生效(/ □ \)...,嘿咻嘿咻,本身测试测试~)。java
本身作了一番测试。先不废话,上代码和测试结果:jquery
1.方法1:CSS3 grayscale滤镜实现。css3
只兼容google、opera、IE7-9web
代码:浏览器
<!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>
若有其余更好方法,欢迎留言讨论。