各大网站全站灰色方式，使用了css filter grayscale实现
grayscale：灰度值，1代表100%灰色

掘金：

1
2
3
4
5
html.gray-mode {
 filter: grayscale(.95);
 -webkit-filter: grayscale(.95);
}

知乎：

1
2
3
4
5
html {
 -webkit-filter: grayscale(1);
 filter: grayscale(1);
}

对于ie浏览器要加这个

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

最终完整版如下：

1
2
3
4
5
6
7
8
9
html {
    grayscale(100%);    
    -webkit-filter: grayscale(100%);    //兼容chrome和safari和2013年后Opera
    -moz-filter: grayscale(100%);     //兼容Firefox
    -ms-filter: grayscale(100%);     //兼容IE、Edge
    -o-filter: grayscale(100%);       //兼容2013年前的Opera
    filter: url(data:image/svg+xml;utf8,#grayscale);         //兼容IE10、IE11
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); //兼容IE6～9
}