重大日子里让整个网站网页变灰方法/网站自动变灰

2020/03/02 16:13 Web 极四维博客 1073 1
😂 这篇文章最后更新于1515天前，您需要注意相关的内容是否还可用。

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

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

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

或者

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内嵌

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

3、JS自动变灰

<script type="text/javascript">
$(function() {
    var myDate = new Date;
    var mon = myDate.getMonth() + 1; //获取当前月
    var date = myDate.getDate(); //获取当前日
    var days=['5.12','12,13']; //在这里自定义日期
    for (var day of days) {
  		var d=day.split('.');
        if (mon == d[0] && date == d[1]) {
        //置html或body标签css皆可
            $("html").css('filter','progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)')
                     .css('-webkit-filter','grayscale(100%)');
        }
	}
})
</script>


声明：本文由极四维博客发布，如需转载请注明出处。