> ## Content Index
> Fetch the complete content index at: https://djdog.cc/llms.txt
> Use this file to discover other available public pages before exploring further.
# 在特殊日期里把网站变为黑白色
- URL: https://djdog.cc/blog/2024/grayscale/
- Published: 2024-12-19T14:30:13.000Z
- Updated: 2026-09-24T14:46:59.000Z
- Description: 在公祭日或其他特殊日子里，将网站变为黑白色以表哀悼
- Author: DJDOG
- Tags: Web, #toc
一般为了纪念重要人物或事件、表达悼念、反思历史，一些网站在特定日子会变成黑白色。
## 实现方案
这里以这个个人站为例，给出一个简单的 CSS 实现方案。
直接在网站的 html 文件中的 head 里引入这段代码：
```html
```
补充，感谢评论区[秋风于渭水](https://www.tjsky.net/?ref=djdog.cc)这位朋友，给出了一个能够实现在对应的日期自动变颜色的 JS 实现方案。
```html
```
代码中还使用了 `window.addEventListener("load", ...)`，使这个脚本会在页面完全加载后执行，不会影响页面的加载过程，非常周到。
不过为了方便后续的维护，还是推荐大家放在外部的 `.js` 文件里去 。
## 属性解析
其中各个属性分别代表：
1. **`-webkit-filter`**: 适用于基于 WebKit 的浏览器（如 Chrome、Safari）。
2. **`-moz-filter`**: 适用于 Mozilla 浏览器（如 Firefox）。
3. **`-ms-filter`**: 适用于基于 Microsoft 的浏览器（如老版 Edge）。
4. **`-o-filter`**: 适用于 Opera 浏览器（旧版）。
5. **`filter: grayscale(100%)`**: 标准 CSS 属性，支持现代浏览器，将页面完全转为灰度。
6. **`filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);`**: 针对老版 IE 浏览器的滤镜，启用灰度效果。
7. **`filter: gray;`**: 旧的非标准灰度实现，部分早期浏览器支持。
如果只需要支持现代浏览器，可以仅保留以下代码：
```css
filter: grayscale(100%);
```
## 效果图
如图所示：
