Javascript 显示透明图像的形状

我需要在我的页面上做一个图像显示部分

在这里，我可以使用亮度显示透明图像的形状，然后移除亮度以显示图像

默认情况下，我使用亮度获得黑色形状，如代码片段中所示。我需要做同样的事情，但改变形状的颜色。我需要用不同的颜色显示透明图像的形状，在我的例子中是红色

如何使用css和/或javascript实现这一点

.mask img{
宽度：50%；
滤光片：亮度（0）；
}

---

使用

混合模式

。混合的颜色和值取决于每种情况，因此需要根据图像进行调整

.mask img{
宽度：50%；
}
.集装箱{
位置：相对位置；
z指数：0；
背景：#fff；
}
.货柜：之后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景：红色；
混合模式：色调；/*或“颜色”以获得不同的效果*/
不透明度：1；
过渡：0.5s；
}
.container:hover:：after{
不透明度：0；
}

---

由于它的形象，我怀疑你能否明白它的意思。您可能需要维护多个图像，并根据逻辑显示必要的图像请参见本主题：