哀悼日全站自动灰化

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

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>