哀悼之餘，分享網頁總體置灰的經驗

新華社北京4月3日電 爲表達全國各族人民對抗擊新冠肺炎疫情鬥爭犧牲烈士和逝世同胞的深切哀悼，國務院今天發佈公告，決定2020年4月4日舉行全國性哀悼活動。在此期間，全國和駐外使領館下半旗誌哀，全國中止公共娛樂活動。4月4日10時起，全國人民默哀3分鐘，汽車、火車、艦船鳴笛，防空警報鳴響。

—— 人民網

幸得有你，山河無恙。吾輩青年，定當圖強！！！

---

今天，能夠看到不少網站都總體展示出灰色，表達全國各族人民對抗擊新冠肺炎疫情鬥爭犧牲烈士和逝世同胞的深切哀悼。哀悼之餘，做爲前端程序員也得學會這個網頁總體置灰技巧。

採用filter

兼容性具體查看 caniuse

方案

直接上代碼： 在網頁得根節點上加上以下css便可

支持chrome和 firefox 最新的瀏覽器

{
     filter:grayscale(.95);
    -webkit-filter:grayscale(.95);
}

兼容 ie瀏覽器

{
 filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=.95 );
}

使用案例 （vue爲例）

template 動態綁定class樣式

<template>
  <div id="app" :class="[{ 'grayAll': isGrayTime }]">
      <router-view/>
  </div>
</template>

data

data() {
    return {
      isGrayTime: false // 默認不是置灰的時間
    }
}

js 在method中添加方法

setGray() {
    let date = new Date();
    let nowMonth = date.getMonth() + 1;
    let nowDate = date.getDate();
    let now = `${nowMonth}${nowDate}`
    
    let someTime = ['44','1213'] // 4月4日· 和 12月13日國家公祭日 選擇置灰
    if(someTime.indexOf(now) > -1) {
        this.isGrayTime = true
    }
}

在 created中 調用

created () {
    this.setGray();
},

style樣式

.grayAll {
    filter:grayscale(.95);
    -webkit-filter:grayscale(.95);

    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=.95 );
}