为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞，国务院发布公告，决于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 站点首页变灰而其他页面色调不变。其他类型的站点只需要变更首页判断函数即可。
过去的今天:
- 2022: Shopify独立站配置结构化数据代码解析(0)
- 2019: 浅谈网站做了HTTPS改造之后的影响(1)
- 2019: 网站有必要做HTTPS改造吗？(0)
原创文章，作者：白天，如若转载请注明出处：网站色调整体变灰
微信扫一扫 
