简单聊聊如何让网站开启灰色显示

查尔斯-BUG万象集

于 2022-12-07 23:48:25 发布

阅读量1k

点赞数

分类专栏：杂碎逆袭史文章标签： css html 前端

本文链接：https://blog.csdn.net/charles_7c/article/details/128229059

版权

杂碎逆袭史专栏收录该内容

13 篇文章 0 订阅

订阅专栏

C：在一些特殊的日子里，为了表达哀思和悼念，除禁娱之外，各网站会将首页或者全站在特定时间内以灰色显示。本篇，笔者就来和各位同学简单聊聊，如何让我们的网站以灰色显示。

在这里插入图片描述

源码解析-掘金

笔者说
作为一个技术行业从业者，对技术要时刻保持好奇心。

笔者虽然是一个后端开发者，但平时在网页或 APP 上遇到一些用心的效果时，也会停下来想想，在方便的情况下也会简单探究一下。既然各网站都开启了灰色显示，想要知道它们怎么实现的，那就随便找几个网站和笔者一起来看看吧。

进入掘金首页，按下 [Fn] + F12，打开开发者工具，切换到 [Elements] 选项卡，毕竟是全局性的效果，所以我们要找的”目标“ 也很明显，在 <html> 标签上，有一个叫 gray-mode 的类，从字面意思（灰色模式）就可以猜到它的作用。

在这里插入图片描述

gray-mode 类的样式代码如下：

html.gray-mode {
  filter: grayscale(.95);
  -webkit-filter: grayscale(.95); /* webkit */
}

很简单的代码 filter: grayscale(.95);，只需要这一行代码即可，第二行代码是为了保障浏览器兼容性而添加的。

首先简单认识一下 filter 属性。

Web开发技术/CSS/filter（滤镜）
CSS 属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。[1]

然后我们再来认识一下 grayscale() 函数。

Web开发技术/CSS/filter/函数：grayscale()
使用 CSS 滤镜属性时，你需要设定下面某一函数的值。如果该值无效，函数返回 none。除特殊说明外，函数的值如果接受百分比值（如 34%），那么该函数也接受小数值（如 0.34）。
grayscale(amount) 函数将改变输入图像灰度。amount 的值定义了转换的比例。值为 100% 则完全转为灰度图像，值为 0% 图像无变化。值在 0% 到 100% 之间，则是效果的线性乘数。若未设置值，默认是 0。[1]

介绍的已经很直白了，我们再简单来说一下，filter: grayscale(.95); 这行代码的作用就是将网页中所有的元素转换为灰色显示，.95 就是 95% 的灰度，没有完全转为灰色也是为了护眼，增强一些用户体验。

源码分析-B站

我们再来看一个网站：B站，同样开启了灰色显示。略有不同的是 B 站的整体感观更舒服一些，没有那么刺眼，一些颜色也能分辨出来。

在这里插入图片描述

那咱们也别啰嗦。

Linus Torvalds
Talk is cheap. Show me the code.（废话少说。放码过来。）

依然很快就找到了“目标”，在 <html> 标签上，有一个叫 gray 的类。

在这里插入图片描述

gray 类的样式代码如下：

html.gray {
  filter: grayscale(85%) saturate(80%);
  -webkit-filter: grayscale(85%) saturate(80%); /* webkit */
  -moz-filter: grayscale(85%) saturate(80%); /* firefox */
  -ms-filter: grayscale(85%) saturate(80%); /* ie9 */
  -o-filter: grayscale(85%) saturate(80%); /* opera */
  filter: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 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=.85);
  -webkit-filter: grayscale(.85) saturate(.8);
}

很显然，B 站在处理灰色效果方面也是使用的 filter: grayscale() ，相比掘金不同的地方有 3 点：

灰度值设为了 85%，这让网站的刺眼程度更低了，观感也就
增加了更多浏览器兼容的代码
增加了 saturate() 函数来控制渲染

前两个好理解，我们来看一下增加的第 3 个函数的作用。

Web开发技术/CSS/filter/函数：saturate()
saturate(amount) 函数转换图像饱和度。amount 的值定义转换的比例。值为 0% 则是完全不饱和，值为 100% 则图像无变化。其他值是效果的线性乘数。超过 100% 则有更高的饱和度。若未设置值，则默认为 1。[1]

简单来说，这个函数就是调整页面中颜色的丰富程度的。 filter: saturate(80%); 这行代码将饱和度降低到了 80%，页面的色彩降低了。 grayscale() 函数搭配上它，就可以缓解因为灰度转换低而显得色彩偏亮了。

动手实现

看了两个源码之后，我们也来尝试一下吧，在网站的 <html> 或 <body> 标签上，添加下面这么一段样式。

/* 灰度模式 */
html {
  filter: grayscale(95%);
  -webkit-filter: grayscale(95%); /* webkit */
  -moz-filter: grayscale(95%); /* firefox */
  -ms-filter: grayscale(95%); /* ie9 */
  -o-filter: grayscale(95%); /* opera */
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=.95);
}

实际效果如下：

在这里插入图片描述

参考资料

Web开发技术/CSS/filter：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

查尔斯-BUG万象集

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
简单聊聊如何让网站开启灰色显示

C：在一些特殊的日子里，为了表达哀思和悼念，除禁娱之外，各网站会将首页或者全站在特定时间内以灰色显示。本篇，笔者就来和各位同学简单聊聊，如何让我们的网站以灰色显示。笔者虽然是一个后端开发者，但平时在网页或 APP 上遇到一些用心的效果时，也会停下来想想，在方便的情况下也会简单探究一下。既然各网站都开启了灰色显示，想要知道它们怎么实现的，那就随便找几个网站和笔者一起来看看吧。进入掘金首页，按下 [Fn] + F12，打开开发者工具，切换到 [Elements] 选项卡，毕竟是全局性的效果，所以我们要找的”目
复制链接

扫一扫