新增《简单聊聊如何让网站开启灰色显示》

2022-12-07 23:49:18 +08:00
parent ff227d59b1
commit 12bf8b2602
6 changed files with 126 additions and 0 deletions
--- a/docs/categories/fragments/2022/12/07/网站开启灰色显示.md
+++ b/docs/categories/fragments/2022/12/07/网站开启灰色显示.md
@@ -0,0 +1,126 @@
+---
+title: 简单聊聊如何让网站开启灰色显示
+author: 查尔斯
+date: 2022/12/07 21:37
+categories:
+ - 杂碎逆袭史
+tags:
+ - CSS
+ - 前端
+---
+
+# 简单聊聊如何让网站开启灰色显示
+
+**C：** 在一些特殊的日子里，为了表达哀思和悼念，除禁娱之外，各网站会将首页或者全站在特定时间内以灰色显示。本篇，笔者就来和各位同学简单聊聊，如何让我们的网站以灰色显示。
+
+![202212072131211](../../../../../public/img/2022/12/07/202212072131211.png)
+
+<!-- more-->
+
+## 源码解析-掘金
+
+::: tip 笔者说
+作为一个技术行业从业者，对技术要时刻保持好奇心。
+:::
+
+笔者虽然是一个后端开发者，但平时在网页或 APP 上遇到一些用心的效果时，也会停下来想想，在方便的情况下也会简单探究一下。既然各网站都开启了灰色显示，想要知道它们怎么实现的，那就随便找几个网站和笔者一起来看看吧。
+
+进入掘金首页，按下 [Fn] + F12，打开开发者工具，切换到 [Elements] 选项卡，毕竟是全局性的效果，所以我们要找的”目标“ 也很明显，在 `<html>` 标签上，有一个叫 `gray-mode` 的类，从字面意思（灰色模式）就可以猜到它的作用。
+
+![202212072131521](../../../../../public/img/2022/12/07/202212072131521.png)
+
+ `gray-mode` 类的样式代码如下：
+
+```css
+html.gray-mode {
+  filter: grayscale(.95);
+  -webkit-filter: grayscale(.95); /* webkit */
+}
+```
+
+很简单的代码 `filter: grayscale(.95);`，只需要这一行代码即可，第二行代码是为了保障浏览器兼容性而添加的。
+
+首先简单认识一下 filter 属性。
+
+::: tip Web开发技术/CSS/filter（滤镜）
+CSS 属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。[1]
+:::
+
+然后我们再来认识一下 `grayscale()` 函数。
+
+::: tip 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 站的整体感观更舒服一些，没有那么刺眼，一些颜色也能分辨出来。
+
+![202212072132211](../../../../../public/img/2022/12/07/202212072132211.png)
+
+那咱们也别啰嗦。
+
+::: tip Linus Torvalds
+Talk is cheap. Show me the code.（废话少说。放码过来。）
+:::
+
+依然很快就找到了“目标”，在 `<html>` 标签上，有一个叫 `gray` 的类。
+
+![202212072132521](../../../../../public/img/2022/12/07/202212072132521.png)
+
+`gray` 类的样式代码如下：
+
+```css
+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 点：
+
+1. 灰度值设为了 85%，这让网站的刺眼程度更低了，观感也就
+2. 增加了更多浏览器兼容的代码
+3. 增加了 `saturate()` 函数来控制渲染
+
+前两个好理解，我们来看一下增加的第 3 个函数的作用。
+
+::: tip Web开发技术/CSS/filter/函数：saturate()
+`saturate(amount)` 函数转换图像饱和度。amount 的值定义转换的比例。值为 0% 则是完全不饱和，值为 100% 则图像无变化。其他值是效果的线性乘数。超过 100% 则有更高的饱和度。若未设置值，则默认为 1。[1]
+:::
+
+简单来说，这个函数就是调整页面中颜色的丰富程度的。 `filter: saturate(80%);` 这行代码将饱和度降低到了 `80%`，页面的色彩降低了。 `grayscale()` 函数搭配上它，就可以缓解因为灰度转换低而显得色彩偏亮了。
+
+## 动手实现
+
+看了两个源码之后，我们也来尝试一下吧，在网站的 `<html>` 或 `<body>` 标签上，添加下面这么一段样式。
+
+```css
+/* 灰度模式 */
+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);
+}
+```
+
+实际效果如下：
+
+![202212072135211](../../../../../public/img/2022/12/07/202212072135211.png)
+
+## 参考资料
+
+1. Web开发技术/CSS/filter：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
--- a/docs/public/img/2022/12/07/202212072131211.png
+++ b/docs/public/img/2022/12/07/202212072131211.png
--- a/docs/public/img/2022/12/07/202212072131521.png
+++ b/docs/public/img/2022/12/07/202212072131521.png
--- a/docs/public/img/2022/12/07/202212072132211.png
+++ b/docs/public/img/2022/12/07/202212072132211.png
--- a/docs/public/img/2022/12/07/202212072132521.png
+++ b/docs/public/img/2022/12/07/202212072132521.png
--- a/docs/public/img/2022/12/07/202212072135211.png
+++ b/docs/public/img/2022/12/07/202212072135211.png