网站快速变黑白灰色的4种方法

一般来说，在清明节、全国哀悼日、大地震日和一些有影响力的伟人去世或纪念日，作为网站管理员，我们使我们网站的所有网页变成灰色（黑白），以表达我们对死者的哀悼。所以微云网络小编说，通过几行简单的代码，实现这个功能。

第一种：修改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%);}

or

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由于网站没有使用最新的网页标准协议，无法生效

<!--!doctypehtmlpublic-->

请将网页的头部替换上述代码。

三是修改添加内联风格的标签

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

代码

第四种:我用的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-*/}

PS：以上方法都是通过的CSS滤镜只是控制页面的显示，唯一不同的是CSS代码调用的方式。各位，自己挖你喜欢的！