置灰网站方式

一、 为什么置灰网站？

大家肯定注意到，很多网站变成灰色，原因都知道，是为了纪念一位伟人。这种把整个页面都变成灰色，是怎么做到的呢？

二、置灰网站的方法？

其实是非常简单的一个操作，仅仅需要一行代码。

html {
    
    
    filter: grayscale(1);
}

使用backdrop-filter实现滤镜遮罩。
在css中有两个和滤镜相关的属性filter和backdrop-filter

filter：不仅仅作用于当前元素，后代元素也会继承这个属性，作用于一个空背景元素则没有效果。
backdrop-filter：可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
backdrop-filter：目前兼容性不佳，尤其是安卓移动端。
上图看效果：

 <header class="box">
        <div>normal</div>
        <div class="filter">filter</div>
        <div class="backdropFilter">backdropFilter</div>
</header>

       .box {
    
    
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: url(../day01/图片/雪山.jpg) no-repeat;
            background-size: cover;
        }

        div {
    
    
            width: 300px;
            height: 200px;
            font-size: 30px;
            text-align: center;
            line-height: 200px;
            background-color: rgba(255, 255, 255, .5);
        }

        .filter {
    
    
            filter: blur(5px);
        }

        .backdropFilter {
    
    
            backdrop-filter: blur(5);
        }

注意两者之间的差异，filter 是作用于元素本身，而 backdrop-filter 是作用于元素背后的区域所覆盖的所有元素。

本人才疏学浅，如果有什么疑问或者建议，可以多多交流。