网页变黑白教程

首页 / 建站备忘 / 正文

前言

  • 4.4号为全国哀悼日,用于表示对医护人员的敬意
  • 本站将一整天保持黑白页面状态

第一种(无定时CSS样式)

[collapse status="false" title="自定义CSS+无定时"]

html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
_filter:none;
}

*可以加入自定义的CSS中

[/collapse]

第二种(无定时sytle标签样式)

[collapse status="false" title="sytle标签样式"]

<style type="text/css">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);} </style>

[/collapse]

第三种定时黑白页面(加入到后台自定义CSS中,其他网页理论通用)

[collapse status="false" title="定时CSS样式"]

    ncov_gray();

    function ncov_gray() {
        var date = new Date();
        this.year = date.getFullYear();
        this.month = date.getMonth() + 1;
        this.date = date.getDate();

        var currentTime = this.year + "." + this.month + "." + this.date;
        if (currentTime == "2020.4.4") {
            $("html").css("filter", "grayscale(1)");
        }
    }

[/collapse]

评论区
头像