悼念模板：一步实现网站页面显示为灰色

前言

效果展示

下面给大家带来使用教程：

全局变灰

1.全局方式一

//网站全部页面变灰 
//e.yaunsu.com
:root {
--BG_COLOR: #121212;
--FONT_COLOR: rgba(255, 255, 255, .87);
--TAB_TITLES_COLOR: rgba(255, 255, 255, .6);
--SUB_TITLE_COLOR: rgba(255, 255, 255, .38);
--TAB_TITLES_HOVER_COLOR: #fff;
--TITLE_HOVER_COLOR: #0D9BFF;
--RIGHT_CONTENT_TEXT_COLOR: rgba(255, 255, 255, .5);
--FOCUS_BG_COLOR: #222222;
--TAB_SUBTITLES_BG_COLOR: rgba(50, 51, 53, .7);
--IMG_DEFAULT_COLOR: #333333;}
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}body{filter:gray;}

2.全局方式二

body > .header,
body > .container,
body > .footer
{-webkit-filter: grayscale(100%);filter: grayscale(100%);}

首页变灰

//仅首页变为灰色
html .home>.header,
html .home>.container,
html .home>.footer
{
    -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
}

使用方法

Zibll设置

如果你使用的是ZibllThemes，那么你可以按照此路径进行设置：登录到你的WordPress后台——>Zibll主题设置——>全局&功能——>自定义代码——>自定义CSS样式

其他Themes

请根据你的需求酌情选择在 foot 或者 head 文件底部进行添加；在添加引用即可,下面则是使用的demo。

<style type=”text/css”>此处中间添加 css 代码样式</style>
//demo
<style type=”text/css”>body >
body > .header,
body > .container,
body > .footer
{-webkit-filter: grayscale(100%);filter: grayscale(100%);}
</style>