今天好多网站都变成灰色了，这到底是怎么实现的？

天是 2020 年 4 月 4 日，星期六，清明节。

我们的国家经历了非常惨痛的时刻，很多英雄在救助他人的路上倒下，更有很多烈士英雄保卫人民的安危遇难，今天全国下降半旗，北京时间 10 点全国默哀三分钟，来致敬英雄们。同时今天一切公共娱乐活动也都会停止，包括直播、综艺、影视、游戏等等。

我也在这里也向全国抗击新冠肺炎疫情斗争牺牲的烈士和逝世的同胞表达深切的哀悼，向所有在抗战在疫情前线的工作和医护人员致敬。我们每一个人的平安面前，都是英雄的人墙。

网站变灰

今天大家可以看到很多很多网站包括主页和内容也都已经变成了灰色，比如百度、B 站、爱奇艺、CSDN 等等。

CSDN

爱奇艺

百度

大家可以看到全站的内容都变成灰色了，包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢？

有人会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了，而且万一某个控件忘记加灰色样式了岂不是太突兀了。

其实，解决方案很简单，只需要几行代码就能搞定了。

实现

我们选择一个网站，比如 B 站吧，打开浏览器开发者工具。

审查一下网页的源代码，我们可以发现在 html 的这个地方多了一个疑似的 class，叫做 gray，gray 中文即灰色。

变灰效果

其 CSS 内容为：

html.gray {

-webkit-filter: grayscale(.95);

}

我们将其取消，就能发现网站的颜色就能重新还原回来了。

还原效果

果然是这个样式在起作用，而且是全局的效果，因为它是作用在了 html 这个节点之上的。

另外看看 CSDN，它也是用的这个 CSS 样式，其内容为：

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

}

这个实现看起来兼容性会更好一些。

因此我们可以确定，通过一个全局的 CSS 样式就能将整个网站变成灰色效果。

分析

那么这里我们就来详细了解一下这究竟是一个什么样的 CSS 样式。

这个样式名叫做 filter，搜下 MDN 的官方介绍，其链接为：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter。

官方介绍内容如下：

filter CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
CSS 标准里包含了一些已实现预定义效果的函数。你也可以参考一个 SVG 滤镜，通过一个 URL 链接到 SVG 滤镜元素 (SVG filter element[1])。

其实就是一个滤镜的意思。

官方有一个 Demo，可以看下效果，如图所示。

Demo

比如这里通过 filter 样式改变了图片、颜色、模糊、对比度等等信息。

其所有用法示例如下：

/* URL to SVG filter */

filter: url("filters.svg#filter-id");

/* <filter-function> values */

filter: blur(5px);

filter: brightness(0.4);

filter: contrast(200%);

filter: drop-shadow(16px 16px 20px blue);

filter: grayscale(50%);

filter: hue-rotate(90deg);

filter: invert(75%);

filter: opacity(25%);

filter: saturate(30%);

filter: sepia(60%);

/* Multiple filters */

filter: contrast(175%) brightness(3%);

/* Global values */

filter: inherit;

filter: initial;

filter: unset;

各个用法介绍大家可以参考官方的文档说明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

比如这里如果我们可以使用 blur 设置高斯模糊，用法如下：

filter: blur(radius)

给图像设置高斯模糊。radius 一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是 0；这个参数可设置绝对像素值，但不接受百分比值。

可以达成这样的效果：

效果

再说回刚才的灰色图像，这里其实就是设置了 grayscale，其用法如下：

filter: grayscale(percent)

将图像转换为灰度图像。值定义转换的比例。percent 值为 100% 则完全转为灰度图像，值为 0% 图像无变化。值在 0% 到 100% 之间，则是效果的线性乘子。若未设置，值默认是 0。另外除了传递百分比，还可以传递浮点数，效果是一样的。

如：

filter: grayscale(1)

filter: grayscale(100%)

都可以将节点转化为 100% 的灰度模式。

所以一切到这里就清楚了，如果我们想要把全站变成灰色，再考虑到各浏览器兼容写法，可以参考下 CSDN 的写法：

.gray {

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

}

这样想要变灰的节点只需要加上 gray 这个 class 就好了，比如加到 html 节点上就可以全站变灰了。

最后呢，看一下浏览器对 filter 这个样式的兼容性怎样，如图所示：

兼容性

这里我们看到，这里除了 IE，其他的 PC、手机端的浏览器都支持了，Firefox 的 PC、安卓端还单独对 SVG 图像加了支持，可以放心使用。

总结

本篇文章简单介绍了一下今天观察到的网站变灰的实现，也学习了 filter 的更详细的用法，希望有帮助。

色显示百度首页

今天早上醒来一看各大网站，为表示新冠肺炎疫情死难者的哀悼，各大网站均将页面变为灰色显示，显示的极为庄重肃穆。本文主要介绍常用网页页面快速变灰色的方法。

CSS样式Filter属性

对于网页而言，页面色彩、布局等主要受到层叠样式文件CSS控制，网站页面整体色彩的改变可以通过CSS进行整体的控制。在CSS中可以通过filter滤镜属性实现对网页元素进行图像、背景及素材的渲染。

Filter调整测试Demo

如上图所示，通过设置Filter的属性取值，实现对颜色色彩的控制。主要属性说明如下：

1、filter: blur()方法

该方法主要用于实现对图像设置高斯模块，及屏幕上的像素融合程度即模糊程度。其参数需要以像素值形式进行提供。参数值越大模糊程度越高。示例如下图：

网页中显示的图标

在未使用filter属性未设置时，显示的原始图片效果如上图所示。我们可以进一步对页面添加style样式调整filter blur参数值，可实现页面的模糊程度。如blur参数取值为2个像素，效果如下：

blur参数取值为2显示效果

2、filter: grayscale()方法

该方法是用于实现页面变灰的主要方法，主要用于设置页面显示的灰度。参数值需要以百分比形式进行提供，0%表示未进行灰度调整，100%表示将页面完全转化为灰度。我们还是以图标为例，对其进行灰度设置进行说明。当灰度取值设置为20%时效果如下图1所示，当灰度值设置为100%时效果如图2所示：

图一：灰度20%设置显示效果

图二：灰度100%设置图片显示效果

使用filter提供的 grayscale()方法对页面进行灰度设置实现效果描述如上图，我们可以快速实现将页面快速变灰。目前浏览器的内核型号较多，对CSS的支持与解析情况不相同，在进行页面灰度处理时需要考虑到用户终端浏览器的类型，需要进行CSS样式的兼容性设置。实现基本代码描述如下：

-webkit-filter: grayscale(100%); 
//(Apple Safari内核)
-moz-filter: grayscale(100%); 
//(Firefox浏览器)
-ms-filter: grayscale(100%); 
//(Internet Explorer（IE）浏览器)
-o-filter: grayscale(100%); 
//(Opera浏览器)

网页变灰实例

在明确网页变灰所需使用滤镜效果之后，我们可以使用其属性进行页面变灰效果。以下给出本人编写的一个简单Demo进行变灰测试，原始页面效果如下：

测试原始页面

按照编码要求，我们在该页面头部<head>编写样式文件，实现变灰处理，所添加代码描述如下：

变灰实现代码

在页面添加变灰代码之后，我们可以看出明显的变灰效果，效果描述如下：

页面变灰实现效果

本文给出了网页页面变灰的实现简单方法，作为网页设计人员、前端开发人员应当能够掌握基本使用方法，实现页面的快速改变。

内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！

大家好，我是大澈！

本文约 1100+ 字，整篇阅读约需 2 分钟。

今天分享一段优质 CSS 代码片段，应用灰度效果，让页面变成黑白显示。

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！


body {
  filter: grayscale(1); // 1相当于100%
}

分享原因

这段代码展示了如何使用 CSS 滤镜来将整个网页变为灰度效果。

在特殊的日子里，网页有整体变灰色的需求，可以使用这段代码，这个需求很有必要。

再就是做一些老照片或黑白电影的效果，也可以使用这段代码。

代码解析

1. 选择器 body

这一部分选择了 HTML 文档的 <body> 元素，即整个网页的主体。

CSS 的 filter 属性通常用于图像，但也可以应用到其他任何 HTML 元素上。

2. grayscale(1);

grayscale 滤镜将元素的颜色变成灰度效果。

参数 1 表示 100% 灰度，参数 0 表示无灰度效果。

3. filter 所有属性值大盘点！

CSS 的 filter 属性提供了多种图形效果，且这些属性值可以组合用起来，且可以应用于任何元素。

以下是 filter 属性的所有值及其详细解释：

blur()

功能：应用模糊效果。

参数：接受一个长度值（如 px、em），默认值是 0。

示例：filter: blur(5px);

brightness()

功能：调整图像的亮度。

参数：接受一个数值，1 为原始亮度。值小于 1 会降低亮度，值大于 1 会增加亮度。

示例：filter: brightness(0.5);

contrast()

功能：调整图像的对比度。

参数：接受一个数值，1 为原始对比度。值小于 1 会降低对比度，值大于 1 会增加对比度。

示例：filter: contrast(200%);

drop-shadow()

功能：应用阴影效果。

参数：类似于 box-shadow，包括偏移量、模糊半径和颜色。

示例：filter: drop-shadow(10px 10px 10px #000);

grayscale()

功能：将图像变为灰度。

参数：接受一个 0 到 1 之间的数值，0 为无灰度，1 为完全灰度。

示例：filter: grayscale(1);

hue-rotate()

功能：旋转图像的色相。

参数：接受一个角度值，单位为度（deg）。

示例：filter: hue-rotate(90deg);

invert()

功能：反转图像的颜色。

参数：接受一个 0 到 1 之间的数值，0 为无效果，1 为完全反转。

示例：filter: invert(1);

opacity()

功能：调整图像的透明度。

参数：接受一个 0 到 1 之间的数值，0 为完全透明，1 为完全不透明。

示例：filter: opacity(0.5);

saturate()

功能：调整图像的饱和度。

参数：接受一个数值，1 为原始饱和度。值小于 1 会降低饱和度，值大于 1 会增加饱和度。

示例：filter: saturate(2);

sepia()

功能：将图像变为棕褐色。

参数：接受一个 0 到 1 之间的数值，0 为无效果，1 为完全棕褐色。

示例：filter: sepia(1);

url()

功能：引用 SVG 滤镜。

参数：接受一个 URL，指向一个包含 SVG 滤镜的文件。

示例：filter: url(#filter-id);

- end -

在线咨询

上一篇：4.零基础开发商城项目：IDEA创建第一个Java程序HelloWorld
下一篇：HTML5多人在线开源游戏-Browserquest

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

今天好多网站都变成灰色了，这到底是怎么实现的？

CSS样式Filter属性

网页变灰实例

您的项目需求