CSS Greyscale Masking

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组：

背景色：灰色; background-blend-mode：multiply;