一行 CSS 让整站变灰的实现与注意点

整站变灰用在哀悼缅怀日和公祭日这类场景，勿忘历史。功能本身不复杂：给根元素挂一层灰度滤镜，所有渲染内容都会继承。一段代码加对位置，用到时开关一次就行。

代码

html {
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    filter: gray;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

现在只用主流浏览器的话，留 -webkit-filter 和 filter 两行就够，progid 那行是给老 IE 的。

加在哪里

有后台设置入口的，直接贴进“主题设置 – 自定义代码 – 自定义 CSS 样式”。其他网页或主题，在 head 或 foot 文件底部用 <style type="text/css"> 把样式包起来引用。也可以单独放一个 ash.css，页面里 link 引用，到期删引用即可。

注意事项

滤镜会让根元素成为 fixed 定位的包含块：页面上有 position: fixed 的悬浮元素时，加完变灰可能错位或跟着滚动，发现布局异常基本就是这个原因，可以把 fixed 元素挪出滤镜作用域。恢复彩色删掉这段 CSS 就行，不要长期挂着。