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

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