核心样式代码

1
2
3
4
5
6
7
8
9
html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

其实直接这样写也行：

1
2
3
html{
    filter: grayscale(100%);
}

但是考虑到 IE 兼容性就写得比较多。

Hexo

全站变灰

这里以 Butterfly 主题为例。新建 css 文件，包含以上代码内容，然后在主题配置文件中 inject 即可。

1
2
3
4
5
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
    # 网页变灰CSS
    - <link rel="stylesheet" href="/css/gray.css">

参考：用代码如何实现整个网站变灰？ - 知乎 (zhihu.com)

指定页面变灰

引入以下 js 文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let style = document.createElement('style')
let graySelector = 'gray-filter'
style.setAttribute('type', 'text/css')
style.textContent = `.${graySelector}{
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}`
document.head.appendChild(style)

let root = document.querySelector('html')
url = window.location.pathname // 取的是文件路径
toggleClassName(root,graySelector)

function toggleClassName(el,name){
    if(url==="/p/26a31d07/") // 指定你要变灰的网页
        el.className = [el.className, name].join(' ')
}
1
2
3
4
5
6
inject:
	head:
		# ... ...
	bottom:
	    # 单页面变灰  
		- <script src="/js/gray_page.js"></script>

参考：

Wordpress

全站变灰

在主题自定义中，找到“额外 CSS”选项，加入上方核心代码片段。

仅让首页变灰

打开仪表盘，进入外观中的主题文件编辑器中，找到 functions.php 文件。在其最末尾添加上：

1
2
3
4
5
6
function nicetheme_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', 'nicetheme_global_greyscale');

更多情形，详见以下参考链接：