网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

css让网页变灰兼容IE/ff/chrome

用声音读出全文关注我吧
 2014/4/1 16:24:19 阅读次数:3551

今天在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}

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

(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭