哀悼之余，分享网页整体置灰的经验

新华社北京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 );
}