一行代码实现全局主题置灰

最近由于追悼会，很多app及网页的首页都置灰了，产品问我们能不能也快速将小程序首页置灰，我说：好的，安排！

全局主题置灰主要是用到一行css代码：

filter: grayscale(1);

可在首页父元素上设置，ok，这样是不是就大功告成了？一测试，发现有以下问题：

1、 配置了 css filter 属性的元素，其子元素的 position:fixed 定位会失效。

【原因】filter 会影响 fixed 的定位参照。由相对视口改为相对设置了 filter 的祖先。当 filter 不为 none 的时候，如果该元素或者其子元素具有 absolute 或 fixed 属性，那么它会为其创建一个新的包含块/容器，所以会相对于新容器定位；但如果 filter 作用在根元素（即 html 标签）时，它是不会为 absolute 或 fixed 子元素创建新的包含块的。

image.png

【解决方案】

web端： 将 filter 设置在 html 上即可。

html {  filter: grayscale(1);}

小程序：需逐个元素排查，确保设置了 filter 的元素，不包含存在 fixed 定位的子元素。

2、配置了 css filter 属性的元素，z-index会被提升，可能会覆盖掉其他有定位元素

【解决方案】

注意调整 z-index 层级。