置灰网站的方式总结前置资源设置网页中存在两个元素，保证第一个元素在首屏，且每个元素都有一个点击事件。如下：代码如下：

前置资源

设置网页中存在两个元素，保证第一个元素在首屏，且每个元素都有一个点击事件。如下：

置灰.gif 代码如下：

    <style>
      .div {
        width: 500px;
        height: 400px;
        text-align: center;
        color: #fff;
        font-size: 50px;
        line-height: 400px;
        margin: 100px;
      }
      .div1 {
        background-color: pink;
      }
      .div2 {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class="div div1" onclick="alert(1)">1</div>
    <div class="div div2" onclick="alert(2)">2</div>
  </body>

网站置灰

通常而言，全站置灰是非常简单的事情，仅仅需要使用一行 CSS，就能实现全站置灰的方式。

我们仅仅需要给 HTML 添加一个统一的滤镜即可：

html {
  filter: grayscale(100%);
}

filter更多信息

全部置灰.gif

置灰首屏

大部分时候，这样都可以解决大部分问题。不过，也有一些例外。譬如，如果我们仅仅需要置灰网站的首屏。

效果如下：

首屏置灰.gif

这里，我们可以借助 backdrop-filter 实现一种遮罩滤镜效果。

backdrop-filter更多信息

filter 是作用于当前元素，并且它的后代元素也会继承这个属性
backdrop-filter 是作用于元素背后的区域所覆盖的所有元素

html {
  position: relative;
  width: 100%;
  height: 100%;
}
html::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  backdrop-filter: grayscale(100%);
}

pointer-events: none 是必须的，以保证页面交互不受影响。

全站置灰保留部分彩色

效果如下：

彩色.gif

针对直接使用 html 置灰的方案

html {
  filter: grayscale(100%);
}

我们的想法是重置 filter: none;，但是我们发现这样是行不通的。

所以还是要使用 backdrop-filter 方案，新增部分样式即可

html::after {
  position: fixed;
  z-index: 10;
}

.div1 {
  position: relative;
  z-index: 100;
}

主要的思路就是设置保留彩色的元素的层级，高于 backdrop-filter 的层级即可

置灰网站的方式总结

前置资源

网站置灰

置灰首屏

全站置灰保留部分彩色

参考资源