2020年4月4日，星期六农历三月十二清明节。在以往的这一天或许并没有太多的特别之处。但今年我国正经历着一场浩劫，新冠肺炎席卷武汉和湖北地区，无数的白衣天使冲向一线，给中国人民构筑了一道坚固的抗疫长城。在这场战役中有一些英雄倒在了抗疫一线。如今，全国为在新冠肺炎中牺牲的英雄和失去生命的同胞降半旗默哀。

1.引言

在清明节这天几乎所有的网站都变成了灰色，那么这种效果是怎么实现的呢？今天就来简单的实现一下这样的效果。

网页|如何实现网页变灰效果_css

图1.1 效果图

先简单的看一下这个网站最初的效果，下面开始将整个网站的变为灰色。

（1）可以在网站的源代码的css中改变网页的样式，为了改变整个网页的样式，肯定要将css代码放在最大的那个标签里面，一般网站是以<html>标签开始</html>标签结束，所以只需要将css所修饰的范围在<html>标签以内的所有东西。可以采用css里面的filter函数，让背景变成黑白色。

 

html {

       filter:  progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

       -webkit-filter:  grayscale(100%);

}

 

网页|如何实现网页变灰效果_microsoft_02

图1.2 效果图

这样网站就变成了黑白色，需要详细的了解filter函数的可以参考菜鸟教程里面的filter函数。

（2）css修饰有三种方式，所以三种方式都是可以的，这里就将剩下的方式列出来仅供参考。

 

<style type="text/css">

html {

filter:  progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

-webkit-filter: grayscale(100%);}

</style>

 

 

<html style="filter:  progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

-webkit-filter:  grayscale(100%);">

 

通过这几种简单的方法就可以让网页变成灰色了。

（3）网站一经发布就会有不同的人去维护，还可以采用一种方式。大部分人的习惯都是将代码放在<body>标签里面，所以也可以通过<body>标签去修饰网页。为了能够在不同的浏览器里面兼容，于是设置了多重属性。

 

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- */

}

 

2.总结

以上几种方法，都是通过CSS的滤镜来控制页面的显示而已，唯一不同的就CSS代码调用的方式。在css的修饰时还有权重问题，所以有时候css代码不生效的时候可以考虑一下代码的权重问题。

愿天堂没有病痛！