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>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
