一般在公祭日或一些影响力很大的伟人逝世或纪念日，作为站长会将网站全站页面变成灰色，以表示我们对逝者的悼念。那今天讲讲几种让网站全站变灰的方法

1、修改CSS，无论是修改CSS文件，还是HTML内部写都可以

1
2
3
4
5
<style type="text/css">
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
</style>

或者

1
2
3
4
5
6
7
8
9
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、HTML内嵌

1
2
<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);">

3、JS定期自动变灰

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="//cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    var myDate = new Date;
    var mon = myDate.getMonth() + 1; //获取当前月
    var date = myDate.getDate(); //获取当前日
    var days=['4.4','5.12','7.7','9.18','12.13']; //在这里自定义日期
    for (var day of days) {
        var d=day.split('.');
        if (mon == d[0] && date == d[1]) {
            var gray='grayscale(100%)';
            $("html,body").css({"filter":'gray !important;',"filter":"progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)","filter":gray,"-webkit-filter":gray,'-moz-filter':gray,'-ms-filter':gray,'-o-filter':gray});
            break;
        }
    }
</script>