公祭日、重大哀悼，整站要先铺一层灰。这版走两条路：Chrome / Firefox / Edge 用 CSS filter，IE9 及以下用 grayscale.js。
嵌入项目时，按后面「公共样式里怎么开整站置灰」那节，把滤镜挂到 html 上。
网页置灰用到哪些文件
现代浏览器只引 gray.css 就够。grayscale.js 只给 IE9 及以下，用条件注释包住，别跟 CSS 滤镜叠两次。
业务就这几个名字，后面会反复碰到：
1、filter: grayscale(100%)：现代浏览器整页变灰
2、filter: gray：老 IE 认的写法
3、<!--[if lte IE 9]>：只有 IE9 及以下会吃到这段
4、grayscale(document.body)：老 IE 里对节点跑一遍去饱和
<!--[if lte IE 9]> 是给 IE 看的条件注释，不是说明文字，去掉老 IE 就灰不了。
CSS 滤镜怎么写成各家浏览器都认
滤镜挂在 html 上，子节点一起变灰，不用每个图片、每个色块写一遍。
我第一次看也卡了一下。说白了吧：filter 只能留住最后一条。现代浏览器认 grayscale(100%)，把 gray 盖掉；IE9 不认 grayscale()，还停在前面的 filter: gray。两条都要写，顺序别反。
-webkit- 给老 Chrome / Safari，-moz-、-ms-、-o- 跟着写，图的是「各家内核都带一刀」。这坑我见过不止一次：只写一条 filter，某台内核不吃，页还是彩的。
100% 是全灰。写成 80% 还能透出一点颜色，公祭页一般用满。
IE9 为什么还要调 grayscale.js
CSS grayscale() IE9 不认。filter: gray 有的环境能把页面颜色压灰，图片、背景图不一定跟得上。所以条件注释里再引 grayscale.js，对 document.body 跑一次。
说白了：脚本里两条退路。浏览器没有 canvas，就上 IE 的 progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)；有 canvas，就把图片像素和 color / backgroundColor 算成灰度再写回去。外链图跨域读不了像素，库会跳过，别指望 CDN 上的图在老 IE 里也被处理。
条件注释只有 IE9 及以下当 HTML 看。Chrome 把整段当注释扔掉，所以现代浏览器不会再跑一遍脚本，灰不会叠两层。
哀悼结束要恢复彩色，现代浏览器用类名摘掉滤镜；老 IE 调 grayscale.reset(document.body)。
公共样式里怎么开整站置灰
接入项目时：公共 CSS 写上 html 那段滤镜，布局文件里补 IE 条件注释。栏目、banner 不用改。活动结束去掉 html-gray；老 IE 再调 grayscale.reset(document.body)，彩色才会回来。
公共样式和条件注释的完整示例
公共 CSS 加上滤镜（或单独一个 gray.css 在活动期间引入）：
公共头：
活动开关写在公共脚本里。本例用 needGray，接到后台开关时换成接口返回值。
html-gray 加在 <html> 上，整站一起灰。只灰某一块，就把滤镜写到那个容器上，grayscale() 也改传那个节点，别再传 document.body。
灰度和作用范围改哪里
1、灰度：本例 100%，一打开就是全灰；要留一点彩色改成 80%、60%。filter: gray 没有百分比，老 IE 只有全灰。
2、挂哪：本例挂 html，整页一起变。只灰头图、不灰按钮，把选择器改成那一块。
3、开关：用 html-gray 这类名控制，活动结束去掉 class。老 IE 对应 grayscale.reset(document.body)。
4、脚本：grayscale.js 只放在 lte IE 9 里，别给现代浏览器再跑一遍。
接入时这几处别漏：filter: gray 写在 grayscale(100%) 前面；条件注释别删；滤镜挂 html 才是整站灰。