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

---

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

---

先来看几个效果图

1. layui社区

在这里插入图片描述

2. 腾讯首页

在这里插入图片描述

3. CSDN

在这里插入图片描述

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

实践 - 照猫画虎

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

在这里插入图片描述

2. 素调 - 方式一：在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;
}

效果预览：

在这里插入图片描述

3. 素调 - 方式二：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>

效果预览：

在这里插入图片描述

3. 素调 - 方式三：腾讯。定义全局样式，在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);
}

效果预览：

在这里插入图片描述

4. 其它方式。

比如grayscale.js或者http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-ie11-v2/，浏览器大safari、Chrome、Firefox、IE、edge的兼容性，请自行测试。

总结

素调方式大同小异，应该都是遵循微软的滤镜。至于你问我为什么能够在0点准时换装，我猜想一个是过早获知消息、定时作业、人工作业两套图片样式、批量下架、而且有的也不是定时完成，比如游戏，有的次日00:12都还不能登录，估计运维睡了，晚点手动操作下。:smile:

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

[图片上传失败...(image-51fbdc-1586082227980)]