“天地失色”如何让HTML网页变成灰色素调

---

title: 如何网页变成灰色素调
date: 2020-04-04 23:31:42
tags: [Hexo,建站]

categories: [建站]

先来看几个效果图

1. layui社区

<!-- more -->

1. 腾讯首页

1. CSDN

1. 百度首页（忘记截图）

实践 - 照猫画虎

1. 先找点HTML页面最好有文字有图片，或者本身随意写几个，这里从网上下载一个简单页面来演示。随意下载一个模板网页，先来预览下未修改前的样式：

1. 素调 - 方式一：在CSS添加如下代码

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    _filter: none;
}

效果预览：

1. 素调 - 方式二：CSDN方式，也在html标签加入。

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);
}

备用：

<style>
body *{
-webkit-filter: grayscale(100%); /* webkit */
-moz-filter: grayscale(100%); /*firefox*/
-ms-filter: grayscale(100%); /*ie9*/
-o-filter: grayscale(100%); /*opera*/
filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
filter:gray; /*ie9- */
}
</style>

效果预览：

1. 素调 - 方式三：腾讯。定义全局样式，在body上引入样式：

.garyBody {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -webkit-filter: grayscale(1);
}

效果预览：

1. 其它方式。

好比grayscale.js或者http://www.majas-lapu-izstrad...，浏览器大safari、Chrome、Firefox、IE、edge的兼容性，请自行测试。

总结

素调方式大同小异，应该都是遵循微软的滤镜。至于你问我为何可以在0点准时换装，我猜测一个是过早获知消息、定时做业、人工做业两套图片样式、批量下架、并且有的也不是定时完成，好比游戏，有的第二天00:12都还不能登陆，估计运维睡了，晚点手动操做下。

最后附一张天地失色 - 万物回春：