天是 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 的更详细的用法，希望有帮助。

References

[1] SVG filter element: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

计最近大家也都看到了，在浏览互联网时，很多网站首页都变成了灰色。比如百度首页、淘宝、京东、哔哩哔哩等我们常浏览的网站。一般在纪念对社会有重大贡献的任务或者大事件时，为了表达我们的尊重以及沉痛心情，将网站变成灰色进行纪念。

那么，作为一个it从业的技术人员来说，将平时色彩鲜明的网站置成灰色是如何实现的呢？是如何可以做到文字、图片、按钮所有的元素都是灰色的效果呢？

方案1：提前设计一套网站的灰色css样式，在需要的时候进行替换。显然这样做的成本太大，而且有些网站还有一些flash的动画效果，难道也要做一个黑白版本？甚至有些CG特效动画更是烧钱。

方案2：几行代码轻松搞定。

其实这个效果的实现并没有我们想象的那么复杂。在网页端按下F12，打开开发者模式，定位到html标签上，我们可以看到这样一段代码样式：

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

如果我们将这个样式取消，或者是将样式中的100%设置为0，又会恢复成网站本来的颜色配置。

那么这段代码是什么意思呢？主要看 filter grayscale(https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter)是个什么东东。

grayscale 是一个 CSS 函数，可以把图像转成灰色，参数是个百分比，结果返回一个 filter 函数。目前的主流浏览器版本都支持 grayscale 函数，比如说 PC 端的 Chrome、edge、Firefox、Opera、Safari 等等，除了 IE。

每一个特定或者特殊的日子里，几乎所有的网站都变成了灰色，那么这种效果是怎么实现的呢？

今天就来简单的实现一下这样的效果。

添加以下全局CSS样式，可以实现此效果：

代码一：

html {
  -webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
} 
<!-- 可以是整个网站变成灰色的  -->

实现网页颜色变灰这个效果，非常简单：

filter: grayscale(100%);

这样一段代码即可实现，放在html和body的css属性里即可实现。

意思是修改所有的颜色为黑白 (100% 灰度):

灰色网站会加入这段代码，你可以按F12，把这段源码删除，即可变成彩色

代码二：

html { 
   filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1); 
}

使用方法：这段代码可以变网页为黑白，将代码加到CSS最顶端就可以实现素装。建议全国站长动起来。为在地震中遇难的同胞哀悼。

如果网站没有使用CSS，可以在网页/模板的HTML代码<head>和</head> 之间插入：

<style>
   html{
     filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1);
  }
</style>

有一些站长的网站可能使用这个css 不能生效，是因为网站没有使用最新的网页标准协议：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

请将网页最头部的<html>替换为以上代码。

有一些网站FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的<object …>和</object>之间插入：

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>

最简单的把页面变成灰色的代码是在head 之间加

<style type="text/css"> 
html {
   FILTER: gray
}
</style>

代码三：

html{ 
filter: grayscale(100%); 
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%); 
filter: url("data:image/svg+xml;utf8,#grayscale"); 
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
-webkit-filter: grayscale(1);
}

总结：

以上几种代码（方法），都是通过CSS的滤镜来控制页面的显示而已，唯一不同的就CSS代码及调用的方式。在css的修饰时还有权重问题，所以有时候css代码不生效的时候可以考虑一下代码的权重问题。

欢迎关注第一山，今后将有更多前端开发技术与大家共同交流学习。