filter 属性

html {
    filter: gray; /* 兼容 IE6-9 的滤镜 */
    filter: grayscale(.95); // 对图片进行灰度转换
    -webkit-filter: grayscale(.95);
}

backdrop-filter 属性

为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

<div class="bg">
    <div>Normal</div>
    <div class="g-filter">filter</div>
    <div class="g-backdrop-filter">backdrop-filter</div>
</div>

.bg {
    background: url(image.png);
    
    & > div {
        width: 300px;
        height: 200px;
        background: rgba(255, 255, 255, .7);
    }
    .g-filter {
        filter: blur(6px);
    }
    .g-backdrop-filter {
        backdrop-filter: blur(6px);
    }
}

在这里插入图片描述
实现置灰

通过 backdrop-filter 可以控制置灰区域，比如只置灰首屏等
必须添加 pointer-events: none; 不影响鼠标事件的交互

html {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: scroll;
}
html::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: grayscale(95%);
    z-index: 10;
}

mix-blend-mode 属性

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;
}

css 变量

通过 css 变量设置灰色主题

低版本浏览器方案

这种方法不会真正地将页面元素的颜色转换为灰度，而是通过覆盖半透明背景来模拟灰度效果。

<!DOCTYPE html>
<html>
<head>
<style>
  .grayscale::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    pointer-events: none; /* 禁用鼠标事件，使得用户可以与页面元素互动 */
  }
</style>
</head>
<body class="grayscale">
  <!-- 页面内容 -->
</body>
</html>