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>