在天朝上國，每逢重大災(zāi)害時期，為了表達(dá)對災(zāi)區(qū)人民支持及同情，網(wǎng)站都會統(tǒng)一把顏色設(shè)置為灰色。這個需求，在網(wǎng)站上，甚至在系統(tǒng)后臺上設(shè)置都非常的簡單。在CRMEB技術(shù)社區(qū)有很多的文章介紹。但是把小程序首頁設(shè)置成灰色，可能就沒有那么簡單了。我們前端技術(shù)嘗試了很久的方法，分享給你。

在PC端使用  filter: grayscale(100%);可以很容易實現(xiàn)這個功能。

小程序上使用這個參數(shù)的時候，你知道該怎么設(shè)置嗎？

方法1：

page {  position: relative;  width: 100%;  height: 100%;  overflow: scroll;}page::before {  content: "";  position: absolute;  inset: 0;  backdrop-filter: grayscale(95%);  pointer-events: none; /* 不接收鼠標(biāo)事件 */  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; /* 不接收鼠標(biāo)事件 */}

方法三：使用root-portal 組件包圍需要懸浮的區(qū)域，

<root-portal>  <pageFooter class="pagefooter"></pageFooter></root-portal>

給其他組件統(tǒng)一設(shè)置：

page,page-footer{  filter: grayscale(100%);}

就可以實現(xiàn)了