CSS 灰度蒙版

Question

我想知道是否可以用灰度部分遮盖 CSS 中的对象。我可以用图像来做到这一点，尽管制作 10% 灰度、11% 灰度等的图像非常困难。

默认左、右90%灰度：

我想要做的事情的一个例子（这代表 50% 灰度蒙版）：

Answer 1

我不确定是否有办法对图像的一部分应用滤镜，但我通常使用的方法是简单地复制图像，将滤镜应用于所有图像之一图片，然后只显示每张图片中我想要显示的部分：

#container {
  width:250px;
  height: 250px;
  overflow: hidden;
}

#right, #left {
  max-width: 50%;
  display: inline-block;
  float:right
}

#right img {
 position: relative;
 left: -100%;
}
#left {
    filter: grayscale(100%);
    float: left;
    overflow: hidden;
}

<div id="container">
    <div id="right">
        <img src="https://i.stack.imgur.com/08h6Q.png"/>
    </div>
    <div id="left">
        <img src="https://i.stack.imgur.com/08h6Q.png"/>
    </div>
</div>

你可以对对象做同样的事情，只需将它们放在容器中，让每个容器的宽度成为你想要显示的任何部分，隐藏其余部分。

Answer 2

制作左右两个 div 的背景，并为左侧 div 设置：

背景颜色：灰色；背景混合模式：相乘；

CSS 灰度蒙版

CSS Greyscale Masking

css

mask