為表達(dá)全國(guó)各族人民對(duì)抗擊新冠肺炎疫情斗爭(zhēng)犧牲烈士和逝世同胞的深切哀悼，國(guó)務(wù)院（4月3日）發(fā)布公告，決定2020年4月4日舉行全國(guó)性哀悼活動(dòng)。在此期間，全國(guó)和駐外使領(lǐng)館下半旗志哀，全國(guó)停止公共娛樂(lè)活動(dòng)。4月4日10時(shí)起，全國(guó)人民默哀3分鐘，汽車、火車、艦船鳴笛，防空警報(bào)鳴響。
在4月4日這天，一些平臺(tái)實(shí)施游戲停服、直播停播、頁(yè)面變灰色調(diào)等等一系列舉措表達(dá)對(duì)逝者的哀悼。
今天（4.5）閑來(lái)無(wú)事，打開(kāi)電腦，看到原來(lái)不僅app變灰色，就連客戶端、網(wǎng)頁(yè)也都變成了灰色，某音樂(lè)客戶端僅主頁(yè)變成了灰色，而另一款則是全部頁(yè)面（個(gè)人中心、評(píng)論頁(yè)等）均變成了灰色調(diào)，網(wǎng)頁(yè)版則都是全部頁(yè)面灰色。
這就勾起了我的好奇，想看看是如何實(shí)現(xiàn)的，準(zhǔn)備拿之前寫(xiě)的vue移動(dòng)端demo試試看。把代碼check下來(lái)（之前是在另一臺(tái)電腦寫(xiě)的，上傳到了我的代碼庫(kù)），運(yùn)行報(bào)錯(cuò)，so，就有了下面的vue項(xiàng)目報(bào)錯(cuò)集合，覺(jué)得所有可能的報(bào)錯(cuò)都被我碰到了，截圖記錄下解決方案，給自己警示也給需要的人，傳送門：vue項(xiàng)目報(bào)錯(cuò)集合：https://blog.csdn.net/pang787559613/article/details/105335423。
終于報(bào)錯(cuò)解決，運(yùn)行成功，把sourcetree中所有改動(dòng)丟棄，依舊完美啟動(dòng)，開(kāi)始正題，實(shí)現(xiàn)頁(yè)面變灰色。
在html中加入以下css可以使整個(gè)頁(yè)面變灰色，Chrome、Safari、Firefox都有效，其余瀏覽器未測(cè)試。
<style>html{filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter:grayscale(1);}</style>
測(cè)試：
沒(méi)加這段css前：
加了之后：
