清明节各大网站实现变灰效果(一行代码搞定)

.4日清明节大家可以看到很多很多网站包括主页和内容也都已经变成了灰色，比如百度、掘金、思否、CSDN 等等。

思否

CSDN

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

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

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

实现

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

变灰效果

审查一下网页的源代码，选中html，然后我们只要将下面这行 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);

}

-webkit-filter: grayscale(.95);我们将其取消，就能发现网站的颜色就能重新还原回来了。还原效果

还原效果

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

因此我们可以确定，通过一个全局的 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: grayscale(percent)

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

可以达成这样的效果：

效果

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

filter: grayscale(percent)

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 图像加了支持，可以放心使用。

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

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

添加以下全局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代码不生效的时候可以考虑一下代码的权重问题。

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

TML 颜色由红色、绿色、蓝色混合而成。

颜色值

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。

这个表格给出了由三种颜色混合而成的具体效果：

颜色值

颜色(Color)	颜色十六进制(Color HEX)	颜色RGB(Color RGB)
	#000000	rgb(0,0,0)
	#FF0000	rgb(255,0,0)
	#00FF00	rgb(0,255,0)
	#0000FF	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#C0C0C0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)

1600万种不同颜色

三种颜色红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。

在下面的颜色表中你会看到不同的结果，从0到255的红色，同时设置绿色和蓝色的值为0,随着红色的值变化，不同的值都显示了不同的颜色。

Red Light	Color HEX	Color RGB
	#000000	rgb(0,0,0)
	#080000	rgb(8,0,0)
	#100000	rgb(16,0,0)
	#180000	rgb(24,0,0)
	#200000	rgb(32,0,0)
	#280000	rgb(40,0,0)
	#300000	rgb(48,0,0)
	#380000	rgb(56,0,0)
	#400000	rgb(64,0,0)
	#480000	rgb(72,0,0)
	#500000	rgb(80,0,0)
	#580000	rgb(88,0,0)
	#600000	rgb(96,0,0)
	#680000	rgb(104,0,0)
	#700000	rgb(112,0,0)
	#780000	rgb(120,0,0)
	#800000	rgb(128,0,0)
	#880000	rgb(136,0,0)
	#900000	rgb(144,0,0)
	#980000	rgb(152,0,0)
	#A00000	rgb(160,0,0)
	#A80000	rgb(168,0,0)
	#B00000	rgb(176,0,0)
	#B80000	rgb(184,0,0)
	#C00000	rgb(192,0,0)
	#C80000	rgb(200,0,0)
	#D00000	rgb(208,0,0)
	#D80000	rgb(216,0,0)
	#E00000	rgb(224,0,0)
	#E80000	rgb(232,0,0)
	#F00000	rgb(240,0,0)
	#F80000	rgb(248,0,0)
	#FF0000	rgb(255,0,0)

灰暗色调

以下展示了灰色到黑色的渐变

Gray Shades	Color HEX	Color RGB
	#000000	rgb(0,0,0)
	#080808	rgb(8,8,8)
	#101010	rgb(16,16,16)
	#181818	rgb(24,24,24)
	#202020	rgb(32,32,32)
	#282828	rgb(40,40,40)
	#303030	rgb(48,48,48)
	#383838	rgb(56,56,56)
	#404040	rgb(64,64,64)
	#484848	rgb(72,72,72)
	#505050	rgb(80,80,80)
	#585858	rgb(88,88,88)
	#606060	rgb(96,96,96)
	#686868	rgb(104,104,104)
	#707070	rgb(112,112,112)
	#787878	rgb(120,120,120)
	#808080	rgb(128,128,128)
	#888888	rgb(136,136,136)
	#909090	rgb(144,144,144)
	#989898	rgb(152,152,152)
	#A0A0A0	rgb(160,160,160)
	#A8A8A8	rgb(168,168,168)
	#B0B0B0	rgb(176,176,176)
	#B8B8B8	rgb(184,184,184)
	#C0C0C0	rgb(192,192,192)
	#C8C8C8	rgb(200,200,200)
	#D0D0D0	rgb(208,208,208)
	#D8D8D8	rgb(216,216,216)
	#E0E0E0	rgb(224,224,224)
	#E8E8E8	rgb(232,232,232)
	#F0F0F0	rgb(240,240,240)
	#F8F8F8	rgb(248,248,248)
	#FFFFFF	rgb(255,255,255)

Web安全色?

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。

我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。

最初，216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：终于搞懂了 CSS 中的百分比是基于什么工作的了
下一篇：「Web前端开发」-16-CSS浮动

您的项目需求

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

整合营销服务商

清明节各大网站实现变灰效果(一行代码搞定)

实现

分析

代码三：

您的项目需求