彩色网页 1秒 变黑白 分类： css3 css svg filter 黑白滤镜 2015-01-16 17:58 222人阅读 评论(2) 收藏

很多时候一有突发事件，需要哀悼的时候，就会把彩色网页变为黑白

首先你要有一个彩色网页，

然后在css中增加以下：

html{
	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);
}

效果对比如下：

（针对文字的颜色，border的颜色，通过img标签插入的彩色图片，通过background-image插入的彩色图片，都有效果）