Web网站置灰的几种方式代码

前言

众所周知，一般有大事情，很多官方网站的首页就会置灰。对这个比较感兴趣，因此就查询了一下，发现设置全站置灰的方式很简单。

记录一下，方便自己查阅。

PS: 本文内容摘抄的，文末有原作者连接

正文

置灰涉及全屏置灰，另外一种是首屏置灰。下面记录一下置灰的代码。

全屏置灰

方式一

亲测，有效。

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

方式二

使用svg滤镜，亲测有效。

<svg xmlns="https://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>
​
<style>
    html {
        filter: url(#grayscale);
    }
</style>

首屏置灰

就是进入是窗口高度置灰，如果拉新滚动后，超过屏幕高度的位置不置灰。

<style>
    html {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: scroll;
        background: #fff;
    }
    html::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 1);
        mix-blend-mode: color;
        pointer-events: none;
        z-index: 10;
    }
</style>

参考文章

1. 《网站置灰的几种方式》