一般在全国哀悼日或者某些纪念日的时候,身为站长我们会让自己的网站全部网页变成灰色,以表示我们对逝者的悼念。那么今天就说说,通过几行简单的代码,来实现这个功能。
第一种:添加代码到style.css文件
在 wordpress 主题的目录中找到 style.css 文件,把下面的代码添加到最底部即可。
html {
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-filter: gray;
filter: gray;
filter: progid: DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
第二种:仅让首页变灰
我们可以留意到如京东、淘宝等一些 APP、网页,会让首页变灰,内页仍保留颜色。
在 WordPress 里我们如何实现这样的效果呢?
把下面的代码,添加到 functions.php 文件最底部即可。
当然现在很多主题已经自带一键变灰功能,那么可以放弃修改其他内容,直接一键实现变灰,有个别 wordpress 主题,则需要把代码添加到 functions_xxx.php 名称的文件中。
function name_global_greyscale() {
if ( is_home() ){
echo '<style type="text/css">html{-webkit-filter:grayscale(1);-webkit-filter:grayscale(100%);filter:grayscale(100%);-webkit-filter:gray;filter:gray;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}</style>';
}
}
add_action('wp_head', 'name_global_greyscale');
通过以上内容我们已经明白wordpress 所搭建网站变成灰色如何实现,使用过程中如遇到问题,欢迎记录下你的问题,我们一起探讨。