saber酱的抱枕

Fly me to the moon

09/18
08:00
学习

使用CSS滤镜将网页变成黑白(灰色)

body {
	filter:grayscale(100%);
	-webkit-filter:grayscale(100%);
	-moz-filter:grayscale(100%);
	-ms-filter:grayscale(100%);
	-o-filter:grayscale(100%);
	filter:url("data:image/svg+xml;	utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
	filter:gray;
	-webkit-filter:grayscale(1);
}

之前我也发过一篇文章,实验了用css滤镜将网页变成灰色,但是那个不太完善。

今天在百度百科看到某位明星的词条变成黑白了,便扒下来代码保存一下。

但是这份代码也有个没能解决的问题:
无法把body上设置的背景图片变成灰色。

使用CSS滤镜将网页变成黑白(灰色)

08/14
08:00
学习

使用灰度滤镜将网页变成灰色

代码如下:

html{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

chrome下效果完美,火狐中body的背景图片没有变灰,IE11中完全无效。对于IE应该可以兼容到IE9。

我花了半个多小时,测试了各种方法,除了各种css外,还找过用js创建canvas的代码,或是使用某jq插件,最后也没成功实现全浏览器通吃。css的方法最简单,不过兼容性不怎么让人满意。

chrome是使用了-webkit-filter: grayscale(100%)这一项,火狐中生效的是filter:grayscale(100%)。

IE10和IE11在图像滤镜方面还是比较坑爹的,不能执行filter滤镜,而且连svg滤镜也不支持。

使用chrome的话可以玩玩下面这个小玩意:

可以重复点哦。

代码如下:

<button id="setGray">设置网页的灰度</button>
<script>
$("#setGray").click(
	function setGray () {
		var grayCss="-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%); filter: grayscale(100%);";
		var num=prompt("请输入您希望的灰度(正整数)","");
		if (num!=100) {
			grayCss=grayCss.replace(/100/g, num);
		};
		$("html").attr("style",grayCss);
	}
)
</script>

以上真是蛋疼之作,不知道会有地方用到不。

使用灰度滤镜将网页变成灰色