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

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

小程序上使用這個(gè)參數(shù)的時(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%);}

就可以實(shí)現(xiàn)了