今天在chrome用百度看到【马航最后通话内容】就点进去了,发现谷歌浏览器的图片颜色都变成灰色的了。但是今天不是讨论马航，而是讨论一个前端站长的技术问题—css让网页变灰兼容IE/ff/chrome。
好奇的我用debug查看了下。代码如下：
html{filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter:grayscale(1)}
然后自己使用后发现FF无效。
然后自己也动手去谷歌了下，才想上面的代码出处应该是在这里：http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html
后面又发现在stackoverflow上也有讨论：http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css
然后又找了些资料，总结方案如下：
html{
/*
* SVG，不建议单独SVG文件
*/
/* filter: url(grayscale.svg#grayscale); */
/*
* 有哥们研究说SVG的支持情况如下：
* http://www.fettblog.eu/blog/2012/06/11/forcing-chrome-to-print-all-pages-in-grayscale/
* SVG version for IE10, Chrome 17, FF3.5, Safari 5.2 and Opera 11.6 -- does not, need to be prefixed. See below
* 不过我测试了下IE10(WIN7&WIN8)都不支持，所以基本兼容情况如下：
* Chorme 25/26不支持，手上没有更低版本的Chorme测试
* FF3.5+
*/
filter:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImdyYXlzY2FsZSI+PGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAuMzMzMyAwLjMzMzMgMC4zMzMzIDAgMCAwLjMzMzMgMC4zMzMzIDAuMzMzMyAwIDAgMC4zMzMzIDAuMzMzMyAwLjMzMzMgMCAwIDAgMCAwIDEgMCIvPjwvZmlsdGVyPjwvc3ZnPg==#grayscale);
/* Webkit only, Chrome & Safari 6+ */
-webkit-filter:grayscale(100%);
/* future-proof */
filter:grayscale(100%);
/* IE4-8 and 9 (deprecated). */
filter:gray;
}
从上面注释基本可以看出对于IE10和低版本Opera CSS处理基本就是没折了；
以上代码使用时属性顺序不能调换；
以上选择器建议html或作用于html上，否则在IE下可能会看到部分元素依旧彩色，当然IE9无论怎样都处理的不是很好
说了这么多，我们来实践下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css让网页变灰兼容IE/ff/chrome</title>
<script type="text/javascript" src="http://www.86y.org/js/jquery.min.js"></script>
<style>
.gray{filter:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImdyYXlzY2FsZSI+PGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAuMzMzMyAwLjMzMzMgMC4zMzMzIDAgMCAwLjMzMzMgMC4zMzMzIDAuMzMzMyAwIDAgMC4zMzMzIDAuMzMzMyAwLjMzMzMgMCAwIDAgMCAwIDEgMCIvPjwvZmlsdGVyPjwvc3ZnPg==#grayscale);-webkit-filter:grayscale(100%);filter:grayscale(100%);filter:gray}
img{height:200px;}
a{background:#ff0000;color:#fff;padding:10px 15px;display:inline-block;margin-bottom:10px;}
</style>
</head>
<body>
<a href="javascript:;" id="change">点让让图片切换灰色/彩色</a>
<div id="pic">
<img src="http://www.86y.org/photo/2010121714001807_U.jpg" />
<img src="http://www.86y.org/photo/2010121714004648_U.jpg" />
</div>
<script>
$("#change").click(function(){
$("#pic").toggleClass("gray");
});
</script>
</body>
</html>
好了，css让网页变灰兼容IE/ff/chrome 就写到这里，如果整个页面需要使用灰色的话可以给html添加以上灰色样式。代码如下：
html{filter:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImdyYXlzY2FsZSI+PGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAuMzMzMyAwLjMzMzMgMC4zMzMzIDAgMCAwLjMzMzMgMC4zMzMzIDAuMzMzMyAwIDAgMC4zMzMzIDAuMzMzMyAwLjMzMzMgMCAwIDAgMCAwIDEgMCIvPjwvZmlsdGVyPjwvc3ZnPg==#grayscale);-webkit-filter:grayscale(100%);filter:grayscale(100%);filter:gray}
相信不少前端设计人员在寻找方法,希望能帮到在前端奋斗的同胞们。
（完）
大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)