一般在全国哀悼日、大型自然灾害,如大地震、大水、疫情等重大事故的时候,我们都会把自己的网站,全站变成灰色!以表示对逝者的悼念!
明天,公元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。
第二种,就是应用中心搜索插件来实现。
例如:网站控制小神器
以上就是,将整站变灰的方法。
还没有评论,来说两句吧...