正文

几行代码将网站变为灰色，特殊哀悼日全站变灰的设置方法

關家三少 V管理员/ 2020年/ 0 评论/ 1364 阅读

0403

这篇文章最后更新于244天前，您需要注意相关的内容是否还可用，如有疑问请联系作者！

一般在全国哀悼日、大型自然灾害，如大地震、大水、疫情等重大事故的时候，我们都会把自己的网站，全站变成灰色！以表示对逝者的悼念！

明天，公元2020年4月4日（清明节），国务院设定为全国哀悼日，还多大型网站和一些个人的网站都把网站设置成为灰色以表哀悼。

那需要如何来实现网站整站变灰？

首先我们看看这些知名大厂的做法：

腾讯网的做法：

<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- */
}
</style>

其他的一些方法：

1.网页黑白代码外部样式（写入*.css文件请用）

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

2.网页黑白代码内部样式（写入头部head标签里面）

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

3.网页黑白代码内联式（写入html标签，找到html）

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

Z-BLOG PHP 主题的设置方法

第一个是，主题的开发者在主题设置中预留了自定义CSS接口，将一下代码复制进去并保存即可。

/*整站变灰，要放在CSS文件首位*/
html{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

这是纯css实现的，不需要任何插件。在来一个js代码，可以实现定时开启：

<script>(function() {
  var date = new Date();
  if (date.getMonth() === 3 && date.getDate() === 4 && date.getFullYear() === 2020)
  $('head').append('<style>html{filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);}</style>')})();</script>

最好把js代码放在head标签之内（主题设置-广告设置，网页头部接口可以放如上代码），最好不要放在网页底部，因为浏览器需要读取js代码，然后在给标签赋予style值，如果放在底部在刷新网站的时候会有一个短暂闪屏。代码的意思就是在2020年4月4日在html和body的标签添加一个style，实现全站变灰，有些人可能会问，既然4月4日，为什么代码中写的是3月？其实getMonth返回的是0-11，所以在3就等于4。

第二种，就是应用中心搜索插件来实现。

例如：网站控制小神器