CSS应用：分享一些“一键使得网站变灰”的方法

当然，为了纪念某个节日或者某个节日，发生了一切大事，一些大型门户变灰了。缅怀伟人等等。作为网站管理员，我们将使我们网站的所有网页变成灰色（黑白），以表达我们对死者的哀悼。

实现这个功能实际上很简单，通过几行简单的代码，接下来，小边与您分享。

修改CSS文件

我们可以在网页的CSS文件中添加以下CSS代码，实现网页的黑白，即网站的灰色

CSS代码

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

在网页标签中添加以下代码

如果不想更改CSS文件，可以在网页头部的标签内添加内联CSS代码，使网页变灰。

代码

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

或者

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,#grayscale"); 
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
    -webkit-filter: grayscale(1);
}

有些站长的网站可能会使用这个css 由于网站没有使用最新的网页标准协议，因此无法生效

请用上述代码替换网页的顶部。

修改标签添加内联风格

如果不喜欢以上两种方式，可以通过修改标签和添加内联风格来达到网页变灰的效果。

代码：

body *{
    -webkit-filter: grayscale(100%); /* webkit */
    -moz-filter: grayscale(100%); /*firefox*/
    -ms-filter: grayscale(100%); /*ie9*///
    -o-filter: grayscale(100%); /*opera*/
    filter: grayscale(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
    filter:gray; /*ie9- */
}

可以参考使用。