网页是如何一夜之间变成黑白的

今天是四月四日清明节, 同时为表达对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的哀悼. 全国停止一切娱乐活动.

首先感谢那些在国家一线奋斗的医生等工作人员, 张小凯在此向你们致敬了!❤

同时可以看到很多网站也变为黑白色了, 这个究竟是怎么实现的呢?

网页是如何一夜之间变成黑白的

其实原理很简单, 就是在网页渲染时加了一层灰色的滤镜:

html {
    /* IE 浏览器 */
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    filter: grayscale(100%);
}

本来是想在今天把我的博客也变黑白色的. 但是博客左右固定定位的元素(比如左边的drawer等)不再固定了.

网上查阅了资料是说:

对于指定了 filter 样式且值不为 none 时，被应用该样式的元素其子元素中如果有 position 为 absolute 或 fixed 的元素，会为这些元素创建一个新的容器，使得这些绝对或固定定位的元素其定位的基准相对于这个新创建的容器。

我们可以联想出fixed是相对于html根容器来定位的，如果在body上设置了filter则会创建一个新的定位基准，而页面滚动时将body滚动出了屏幕外，则body内所有子孙元素的fixed将产生不符合预期的效果。

但是样式应用到了html也没有解决该问题…(实在抱歉~)

即使使用了下面的css样式也没解决问题(Firefox):

html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}

感兴趣的可以试试.

同时也希望知道解决方案的大牛在下方留言, 谢谢!!!❤