小程序首页置灰问题总结

近期很多主流的app与小程序都将首页页面置灰，部分app甚至是将整个站内的元素都置灰了。 于是乎，公司产品就要求将公司小程序的首页根据开关来设置是否进行置灰效果。

这里主要是总结 filter过滤器使用过程中与其他样式相互影响的问题。 

问题描述： 小程序首页实现了置灰效果，但是有些小程序首页会除了原本的所有内容置灰之外，会在下面形成一部分空白的内容。

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

解决方案： 主要还是这个方式，重点是在哪里添加这个样式。 一般会放在跟元素那里，但是我们小程序的装修页面中，存在很多弹窗以及其他定位的元素，因此我们的处理方案就是在装修页面中将其他弹窗等内容挪到外部，仅对首页的装修内容进行 置灰处理。

        后来想到一个另外的方案，这个首页的内容大部分都是装修过来，其实也可以在装修的项目中处理这个效果。

     

参考： 一段css让全站变灰的代码总结_开源之家