在一些重大纪念日或哀悼活动期间，部分网站会将整个页面调整成灰色，以表达纪念和哀思。
实现网站整体变灰并不复杂，只需要使用CSS的filter滤镜属性，不需要把网站中的图片逐张处理，也不需要修改原有文字、背景和按钮的颜色。
现代浏览器使用下面这一行CSS即可：
html {
filter: grayscale(100%);
}
一、网页整体变灰的实现原理
CSS中的filter属性可以对网页元素的最终显示效果进行图形处理，例如：
- 灰度；
- 模糊；
- 亮度调整；
- 对比度调整；
- 色相旋转；
- 颜色反转。
grayscale()表示灰度滤镜：
filter: grayscale(100%);
其中：
grayscale(0%)表示保持原来的颜色；grayscale(50%)表示保留一部分颜色；grayscale(100%)表示完全变成灰色；grayscale(1)与grayscale(100%)效果相同。
浏览器会先正常渲染网页，再对最终显示出来的内容进行灰度处理。
这种方法只是改变浏览器中的显示效果，不会修改服务器上的图片、视频、CSS颜色值和数据库内容。删除灰度CSS以后，网站就会恢复原来的颜色。
grayscale()已经是现代浏览器广泛支持的标准CSS功能。
二、方法一：在网站CSS文件中添加灰度代码
打开网站正在使用的CSS样式文件，在文件末尾添加：
html {
filter: grayscale(100%);
}
保存文件并清理网站缓存后，整个网页就会变成灰色，包括：
- 网站背景；
- 文字和按钮；
- Logo及图标；
- 普通图片；
- 视频画面；
- Canvas内容；
- 页面中的其他可视元素。
这是最简单、最推荐的实现方法。
如果网站仍然显示彩色，可能是CSS缓存、CDN缓存或者浏览器缓存没有更新，可以清理缓存后重新访问。
三、方法二：在head标签中添加CSS
如果不方便修改网站的CSS文件，也可以将以下代码添加到网页的<head>和</head>标签之间：
<style>
html {
filter: grayscale(100%);
}
</style>
完整结构示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>网站标题</title>
<style>
html {
filter: grayscale(100%);
}
</style>
</head>
<body>
网站内容
</body>
</html>
这种方法适合临时调整网站样式，但如果网站有很多独立页面，最好把代码添加到公共模板或全局CSS文件中，避免逐个页面修改。
四、方法三：通过CSS类控制灰度效果
如果网站只需要在特定日期临时变灰，建议使用CSS类控制。
先在CSS文件中添加：
html.site-grayscale {
filter: grayscale(100%);
}
需要网站变灰时，将html标签修改为：
<html class="site-grayscale">
需要恢复彩色时，删除site-grayscale类：
<html>
这种方法的好处是CSS代码可以长期保留，以后只需要添加或删除类名，不必反复修改样式文件。
如果html标签原来已经存在其他类名，可以直接追加：
<html class="原来的类名 site-grayscale">
不要删除原有类名，否则可能影响网站的其他样式和功能。
五、WordPress网站怎么变成灰色？
wordpress网站同样可以使用：
html {
filter: grayscale(100%);
}
可以将代码添加到以下位置之一：
- 当前子主题的
style.css文件； - 主题提供的“自定义CSS”功能；
- WordPress外观设置中的附加CSS区域；
- 网站全局页头中的自定义样式位置。
如果直接修改主题文件，建议使用子主题，避免主题更新以后自定义代码被覆盖。
添加代码后，如果前台没有变化，需要清理：
- WordPress页面缓存；
- 服务器缓存；
- CDN缓存；
- 浏览器缓存。
六、只让网页部分区域变成灰色
如果不想让整个网站变灰，只需要给指定区域添加灰度滤镜。
HTML代码：
<div class="grayscale-section">
这里的内容会变成灰色
</div>
CSS代码：
.grayscale-section {
filter: grayscale(100%);
}
只有.grayscale-section及其内部内容会变成灰色，页面中的其他区域仍然保留原来的颜色。
图片单独变灰也可以使用相同方法：
.grayscale-image {
filter: grayscale(100%);
}
<img class="grayscale-image" src="image.jpg" alt="图片说明">
七、能不能让网站变灰，但保留某个元素的颜色？
如果将滤镜添加在html元素上，整个网页会作为一个整体进行灰度处理。
这时，即使给内部元素添加：
.keep-color {
filter: none;
}
也无法恢复原来的彩色。因为父级html已经对包括该元素在内的最终画面进行了灰度处理。
如果确实需要保留某些区域的颜色，就不能直接给html添加滤镜，而应该只给需要变灰的页面区域添加灰度样式，并让需要保留颜色的元素位于灰度区域之外。
例如：
<div class="grayscale-section">
网站主要内容
</div>
<div class="keep-color">
这里保留彩色
</div>
.grayscale-section {
filter: grayscale(100%);
}
八、旧版网页灰度代码为什么不建议使用？
以前为了兼容旧版IE、Firefox、Opera等浏览器，经常会看到以下代码：
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray;
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
这些写法大多是旧浏览器时代的兼容方案。
现在主流浏览器已经支持标准的CSS滤镜，只需要：
filter: grayscale(100%);
继续保留大量旧前缀不仅会让代码显得混乱，还会增加后续维护成本。
如果网站确实需要兼容非常老的Safari浏览器，可以额外保留：
html {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
对于正常使用现代Chrome、Edge、Firefox和Safari的用户，一般不需要添加这些旧兼容代码。
九、为什么不建议使用body *？
下面这种写法会给body中的几乎所有元素分别添加滤镜：
body * {
filter: grayscale(100%);
}
它虽然也可能让页面看起来变灰，但没有必要。
网页中可能包含大量嵌套元素，这种写法会让浏览器对不同元素分别处理滤镜，可能增加渲染开销，也可能影响某些动画、定位、阴影和层叠效果。
让整个网站变灰时，直接给根元素添加一次滤镜即可：
html {
filter: grayscale(100%);
}
十、使用灰度效果需要注意什么？
1. 检查文字和背景的对比度
彩色页面变成灰色后，部分文字、按钮和背景的明暗差异可能会变小，导致内容难以辨认。
启用灰度效果后，应重点检查：
- 正文是否清晰；
- 链接能否与普通文字区分；
- 按钮边界是否明显；
- 表单错误提示是否容易识别；
- 禁用和启用状态是否能够区分；
- 图表中的不同数据是否还能看懂。
W3C无障碍规范建议，不要只依赖颜色传递信息，还应配合文字、图标、下划线、形状或其他提示。
2. 检查图表和状态提示
如果网站使用红色表示错误、绿色表示成功，网页变灰后，两种状态可能不容易区分。
可以同时增加文字说明：
操作成功
操作失败
不要只依靠红色和绿色让用户判断状态。
3. 检查视频和动画性能
CSS滤镜需要浏览器对网页画面进行额外处理。普通网站通常不会有明显影响，但如果页面中包含大量动画、高清视频或复杂视觉效果，建议在电脑和手机上分别测试。
4. 灰度效果不会影响真实文件
网页中的图片只是显示为灰色，服务器上的原始图片仍然是彩色的。
用户直接下载图片文件或者关闭CSS以后，仍然可以看到原来的颜色。
十一、如何恢复网站原来的颜色？
恢复网站颜色有三种方法：
- 删除
filter: grayscale(100%);； - 删除
html标签中的site-grayscale类； - 将灰度值改成0：
html {
filter: grayscale(0%);
}
最推荐的临时启用方式是：
html.site-grayscale {
filter: grayscale(100%);
}
需要网站变灰时添加类名，活动结束后删除类名，既方便管理，也不会影响网站原来的CSS代码。
总的来说，现代网站实现全站灰色效果并不需要复杂的兼容代码。使用一行标准CSS即可：
html {
filter: grayscale(100%);
}
它不会修改网站文件中的颜色数据，只会在浏览器渲染时将整个页面转换成灰度效果。
