在特殊日期里把网站变为黑白色 • DJ王大海

一般为了纪念重要人物或事件、表达悼念、反思历史，一些网站在特定日子会变成黑白色。

实现方案#

这里以这个个人站为例，给出一个简单的 CSS 实现方案。

直接在网站的 html 文件中的 head 里引入这段代码：

<style>
    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);
      filter: gray;
    }
  </style>

html

补充，感谢评论区秋风于渭水 ↗这位朋友，给出了一个能够实现在对应的日期自动变颜色的 JS 实现方案。

<body>
<!-- 其他 body 内容 -->
	<script>
		(function() {
			const e = window.MOURNING_MODEDATE_LIST || ["7/7", "9/18", "12/13"];
			window.addEventListener("load", function() {
				const n = `${(new Date).getMonth() + 1}/${(new Date).getDate()}`;
				e.some(e => e === n) && (function() {
					if ('grayscale' in document.body.style) {
						// 支持filter的浏览器
						document.body.style.filter = "grayscale(1)";
					} else { // 旧版IE浏览器
						document.body.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
					}
				})();
			});
		})();
		if (typeof define === "function" && define.amd) {
			define(e);
		} else {
			e();
		}
	</script>
</body>

html

代码中还使用了 window.addEventListener("load", ...)，使这个脚本会在页面完全加载后执行，不会影响页面的加载过程，非常周到。

不过为了方便后续的维护，还是推荐大家放在外部的 .js 文件里去。

属性解析#

其中各个属性分别代表：

-webkit-filter: 适用于基于 WebKit 的浏览器（如 Chrome、Safari）。
-moz-filter: 适用于 Mozilla 浏览器（如 Firefox）。
-ms-filter: 适用于基于 Microsoft 的浏览器（如老版 Edge）。
-o-filter: 适用于 Opera 浏览器（旧版）。
filter: grayscale(100%): 标准 CSS 属性，支持现代浏览器，将页面完全转为灰度。
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);: 针对老版 IE 浏览器的滤镜，启用灰度效果。
filter: gray;: 旧的非标准灰度实现，部分早期浏览器支持。

如果只需要支持现代浏览器，可以仅保留以下代码：

filter: grayscale(100%);

css

效果图#

如图所示：

实例截图