在天朝上国，每逢重大灾害时期，为了表达对灾区人民支持及同情，网站都会统一把颜色设置为灰色。这个需求，在网站上，甚至在系统后台上设置都非常的简单。在CRMEB技术社区有很多的文章介绍。但是把小程序首页设置成灰色，可能就没有那么简单了。我们前端技术尝试了很久的方法，分享给你。
在PC端使用 filter: grayscale(100%);可以很容易实现这个功能。
小程序上使用这个参数的时候，你知道该怎么设置吗？
方法1：
page { position: relative; width: 100%; height: 100%; overflow: scroll;}page::before { content: ""; position: absolute; inset: 0; backdrop-filter: grayscale(95%); pointer-events: none; /* 不接收鼠标事件 */ z-index: 999;}方法2：使用遮罩层
.gray-overlay { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); /* 半透明的灰色 */ z-index: 9999; /* 确保遮罩在最上层 */ pointer-events: none; /* 不接收鼠标事件 */}方法三：使用root-portal 组件包围需要悬浮的区域，
<root-portal> <pageFooter class="pagefooter"></pageFooter></root-portal>给其他组件统一设置：
page,page-footer{ filter: grayscale(100%);}就可以实现了
