悲伤主题 H5 实现细节

今天为纪念因新冠状病牺牲的烈士和逝世同胞，很多网站和app 都上线了 sad 主题，下面说一说用 H5 方式如何实现这个主题。

由于实现方式比较简单，先说结论:

html 元素添加样式

filter: grayscale(100%);

上面是不考虑浏览器兼容性的实现方案，针对老旧浏览器可以做的兼容处理:

filter: progid: DXImageTransform.Microsoft.BasicImage(grayscale=1);

实际生产环境中的方案

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

主要网站实现展示:

bilibili
m.taobao
m.jd