css让网页变灰兼容IE/ff/chrome-幸凡学习网

今天在chrome用百度看到【马航最后通话内容】就点进去了,发现谷歌浏览器的图片颜色都变成灰色的了。但是今天不是讨论马航，而是讨论一个前端站长的技术问题—css让网页变灰兼容IE/ff/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}

相信不少前端设计人员在寻找方法,希望能帮到在前端奋斗的同胞们。

（完）

如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=708【css让网页变灰兼容IE/ff/chrome】幸凡学习网