今天搞个小玩意儿，就是把整个网页弄成灰色的。有时候，比如一些特殊的日子，网站需要表达点肃穆的气氛，整体变灰是个常见的做法。我之前没正经弄过，这回就实践一把。
摸索过程
一开始我想，这玩意儿肯定是用样式（CSS）来控制的。总不能让我一张张图片去改成灰色的，那得累死。内容、按钮啥的也得变灰才行。
我就去网上随便扒拉一下，看看大家都是怎么搞的。搜出来不少方法。
- 有说直接在 `body` 标签上加个 `style="filter:gray"` 的，感觉有点老旧，好像是以前IE浏览器用的？试下，效果不太对劲，或者说在现在的浏览器上不咋好使。
- 还有看到更靠谱点的，用 CSS 的 `filter` 属性。这个看起来现代多。
动手实践
我觉得 CSS `filter` 这个路子靠谱。那就试试呗。
最简单的想法，就是给整个页面套上这个效果。哪个标签能代表整个页面？`html` 标签或者 `body` 标签都行。我选 `html` 标签，感觉更彻底点，覆盖整个文档。
然后就在我的 CSS 文件里加上这么一句：
html { filter: grayscale(100%); }
这个 `grayscale(100%)` 的意思就是“灰度化”，括号里的 `100%` 就是完全变成灰色。如果你想弄个半灰不彩的效果，可以试试 `50%` 之类的。
为保险起见，有时候需要考虑一些老旧浏览器或者特定内核的兼容性，虽然现在可能用处不大，但加上总没坏处。我又补充一行带前缀的：
html { -webkit-filter: grayscale(100%); / 兼容老webkit内核 / filter: grayscale(100%); }
把这几行代码加到我的全局 CSS 文件里，保存。
看效果
回到网页，刷新一下。嚯，成！整个页面，从图片到文字，从背景到按钮，全都变成黑白灰的调调。效果很到位，正是我想要的。
我还看到有人说用 JavaScript 也能实现，大概就是获取 `*` （也就是 `html` 元素），然后用 JS 去设置它的 `*` 属性。代码类似这样：
*.filter = 'grayscale(100%)';
不过我觉得，能用 CSS 简单搞定的事儿，就没必要上 JS 。纯展示性的效果，CSS 最拿手，也更简洁高效。除非你还需要用 JS 去动态控制什么时候变灰、什么时候恢复，那另说。
这回实践挺顺利的，就这么一两行 CSS 代码，轻松搞定页面变灰的需求。记录一下，省得下次又忘。
