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

2020-06-08 00:30:44

标签： 转载 css 网页变灰 兼容IE/ff/chrome

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

![css让网页变灰兼容IE/ff/chrome](http://file.song-z.com/res/image/20200608/1591547440219_000034.png)

好奇的我用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
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无论怎样都处理的不是很好

说了这么多，我们来实践下：

```html
<!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}

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

上一篇：自适应页面图片CSS设置图片不超出屏幕下一篇：CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行

分享到：QQ空间新浪微博腾讯微博人人网微信

登录