網站圖片置灰現在已經很常見了，最近上網找了些資料，基本都是用css3 grayscale和grayscale.js，做了測試，發現用CSS或greyscale.js都不能完全兼容。
測試瀏覽器版本：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>
PS：
使用grayscale.js的缺點：1. 頁面加載完后才對整個頁面進行變灰操作；2. 在非 IE 瀏覽器中不支持來自其它域名的網站圖片的變灰(網上說法，自己並未測試過)；3. 造成非 IE 瀏覽器在加載完頁面后進行大量 js 計算，該計算負擔可以通過僅變灰 img, a 等標簽而不是 body 來優化。
使用grayscale.js的缺點：1. 頁面加載完后才對整個頁面進行變灰操作；2. 在非 IE 瀏覽器中不支持來自其它域名的網站圖片的變灰(網上說法，自己並未測試過)；3. 造成非 IE 瀏覽器在加載完頁面后進行大量 js 計算，該計算負擔可以通過僅變灰 img, a 等標簽而不是 body 來優化。
如有其他更好方法，歡迎留言討論。