Niko
几种实现网页置灰的方式

几种实现网页置灰的方式


css 置灰 前端

将以下一个网页置灰

<html>
  <style>
    img {
      display: block;
      margin: auto;
      height: 200px;
    }
  </style>
  <body>
    <img
      src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
      alt=""
      onclick="clickImage()"
    />
    <img
      src="https://img0.baidu.com/it/u=1684532727,1424929765&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675"
      alt=""
    />
    <img
      src="https://img1.baidu.com/it/u=4049022245,514596079&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"
      alt=""
    />
    <img
      src="https://img1.baidu.com/it/u=1472391233,99561733&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"
      alt=""
    />
    <img
      src="https://img1.baidu.com/it/u=3363566985,99735131&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
      alt=""
    />
    <img
      src="https://img2.baidu.com/it/u=3219906533,2982923681&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
      alt=""
    />
    <img
      src="https://img1.baidu.com/it/u=1771079238,1156389364&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
      alt=""
    />
    <img
      src="https://img2.baidu.com/it/u=3038223445,2416689412&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
      alt=""
    />
    <img
      src="https://img1.baidu.com/it/u=1839135015,723795615&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
      alt=""
    />
    <img
      src="https://img0.baidu.com/it/u=1275095085,1961143463&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
      alt=""
    />
    <img
      src="https://img2.baidu.com/it/u=63249423,2260265143&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"
      alt=""
    />
    <img
      src="https://img0.baidu.com/it/u=4187423482,206374644&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
      alt=""
    />
    <img
      src="https://img0.baidu.com/it/u=2243264347,2203972402&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
      alt=""
    />
    <img
      src="https://img0.baidu.com/it/u=530426417,2082848644&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
      alt=""
    />
    <img
      src="https://img2.baidu.com/it/u=3344911223,3409692090&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313"
      alt=""
    />
    <img
      src="https://img1.baidu.com/it/u=204971088,1987351322&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
      alt=""
    />
  </body>
</html>
<script>
  function clickImage() {
    console.log("image clicked");
  }
</script>

1.filter: grayscale

html {
  filter: grayscale(0.95);
}

这样就可以实现整个页面置灰。

2.svg 滤镜

<body>
  ...
</body>
<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>
html {
  filter: url(#grayscale);
}

这样也可以实现整个页面置灰。

如果我们仅仅需要置灰网站的首屏，而当用户开始滚动页面的时候，非首屏部分不需要置灰，就需要用其他方案了。

3. backdrop-filter

html::before {
  content: "";
  position: absolute;
  inset: 0; /* top right bottom left简写 */
  backdrop-filter: grayscale(95%);
  z-index: 10;
  pointer-events: none;
}

pointer-events: none是为了防止添加遮罩层后，页面上的交互事件失效。如果要用它实现跟 filter: grayscale一样的效果，把position改为fixed也是可以的。

4.mix-blend-mode

html {
  background-color: #fff;
}
html::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 1);
  mix-blend-mode: color;
  pointer-events: none;
  z-index: 10;
}

同样是给首屏加了一个遮罩，这个时候注意要给html设置白色背景。

总结

  1. 如果你需要全站置灰，使用 CSS 的 filter: grayscale()
  2. 对于一些低版本的浏览器，使用 SVG 滤镜通过 filter 引入
  3. 对于仅仅需要首屏置灰的，可以使用 backdrop-filter: grayscale() 配合 pointer-events: none
  4. 对于需要更好兼容性的，使用混合模式的 mix-blend-mode: hue、mix-blend-mode: saturation、mix-blend-mode: color 也都是非常好的方式。
© 2025 Niko Xie