彩色网页 1秒 变黑白

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

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

然后在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插入的彩色图片,都有效果)


彩色网页 1秒 变黑白_第1张图片     彩色网页 1秒 变黑白_第2张图片

你可能感兴趣的:(css,filter,css3,svg,黑白滤镜)