网站色调整体变灰

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞,国务院发布公告,决于2020年4月4日举行举行全国性哀悼活动。当天,几乎所有的app应用、网页都换成灰色调以示哀悼。那么怎样让网站色调整体变灰呢?

网站色调整体变灰

网站色调整体变灰做法

不论你的网站是Wordpress、dedecms还是z-blog,做法都一样,只需加一串css代码即可。简单直接的做法就是头部模板内将:

<html>

修改为:

<html style="filter: grayscale(100%);">

即可。

为适配各种浏览器,完整的代码为:

<html style="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,<svg xmlns='http://www.w3.org/2000/svg'><filter id=… 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);">

如果只想让网站首页变灰,那么我们只需要在代码前面加一个判断是否为首页函数即可,比如 WordPress 站点,只需要在header.php文件的</head>之前添加以下代码:

<?php wp_reset_query();if ( is_home()){ ?>
<style>html{filter: grayscale(100%);}</style>
<?php } ?>

即可实现 WordPress 站点首页变灰而其他页面色调不变。其他类型的站点只需要变更首页判断函数即可。

过去的今天:

原创文章,作者:白天,如若转载请注明出处:网站色调整体变灰

(4)
打赏 微信扫一扫 微信扫一扫
白天的头像白天博主
上一篇 2020年3月21日 11:12:22
下一篇 2020年4月8日 22:57:40

相关阅读推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

微信内浏白天博客