搜 索

网页变黑白教程

  • 340阅读
  • 2020年04月03日
  • 0评论
首页 / 建站备忘 / 正文

前言

  • 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]

评论区
暂无评论
avatar