1. 白天博客首页
  2. 分享
  3. 技术教程
  4. 网站色调整体变灰

网站色调整体变灰

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞,国务院发布公告,决于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 站点首页变灰而其他页面色调不变。其他类型的站点只需要变更首页判断函数即可。

历史上的今天:

文章最后一次修改于2020年6月02日 23:06:40

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

发表评论

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