CSS网页变灰色代码方法分享

文章摘要

在哀悼事件中，很多网站会通过CSS滤镜将网页背景变灰以示哀悼。文章介绍了两种方法：一种是直接使用`filter: grayscale(100%)`，另一种是通过自定义滤镜代码实现。第一种方法简单，直接在`BODY`样式或`CSS`文件中添加即可；第二种方法提供了更灵活的自定义滤镜效果。文章还推荐了兼容版本的代码，确保不同浏览器的支持。两种方法各有优劣，读者可根据需求选择适合的方案。

发生重大哀悼事件时候，很多网站都将网站变灰色以示哀悼。在此我给大家总结了两种CSS网页变灰色代码方法，分享给大家。

CSS filter方法

直接写在BODY里面，只需要将CSS代码：filter: grayscale(100%);放到body元素里面。如下图所示：

1	`<body` `style="filter: grayscale(100%);">`

或者写在CSS文件里面，兼容写法

html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
_filter:none;
}

简洁的写法

html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
}

CSS grayscale方法

直接在网站的CSS样式文件中加入下面的代码，这样不用改html代码。

1	`html {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);_filter:none;}`

或者使用下面的代码，兼容写法推荐上面的代码

html{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
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\'></fecolormatrix></filter></svg>#grayscale");
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}