Html 在悬停时添加颜色覆盖

我想实现如图所示的功能

左边的图像是原始图像，当我将鼠标悬停在该图像上时，我们定义的一些颜色应该覆盖在该图像上，如右图所示。我尝试过使用CSS，但没有用。我试图通过SVGs实现这一点，但我在这方面没有太多经验。有什么方法可以达到这个效果吗

更新

• 我不想在悬停时使用任何额外的图像
• 我可以选择任何其他颜色，而不是悬停时的黑色

---

这可以通过

webkit过滤器实现

请尝试使用未悬停的图像：

img {
    -webkit-filter: contrast(10) grayscale(1);
}

然后将所有过滤器置于悬停状态：

img:hover {
    -webkit-filter: none;
}

您必须知道，并非所有浏览器都支持
-webkit过滤器
。另外，检查一下也不错。它将帮助您找到正确的值。
使用鼠标悬停时可以使用两个图像，您可以显示第二个图像，也可以隐藏第一个图像。同样，您可以使用第二个图像执行此操作


.图片悬停{
背景：url(http://i.stack.imgur.com/55veX.png);
宽度：239px；
高度：180像素；
}
.图片悬停：悬停{
背景：url(http://i.stack.imgur.com/55veX.png);
宽度：239px；
高度：180像素；
背景位置：-239px 0px；
}
为什么不使用图像-悬停？抱歉，忘了提及。悬停时不使用图像…您可以使用svg轻松实现这一点。但是您需要将图像作为svg文件，图像是光栅格式、jpg或png。我们是否可以将其包括在内，并对SVG进行编辑。有可能吗？我已经用过svg了，我不确定你能不能用png，jpg。如果你有一个svg并将其发布在问题中，我可以告诉你怎么做。我希望能够用任何颜色替换覆盖。嗯，我学习了一些CSS过滤器。。但这并不完全是我在这个问题上所需要的。我知道，如果你不想使用第二张图像，你可以做的只有一件事。我希望能够根据用户的选择覆盖多种颜色。你可以使用webkit过滤器：不透明度（25%）；但这种方法不是基于浏览器的交叉，不能按需要提供输出。您可以使用svg，将图像传输到svg文件类型字体，通过字体面连接，并使用psevdo元素悬停和所需颜色来填充我不想使用的第二幅图像。还有其他选择吗？
<div class="picture-hover"></div>

.picture-hover {
            background: url(http://i.stack.imgur.com/55veX.png);
            width: 239px;
            height: 180px;
        }
        .picture-hover:hover {
            background: url(http://i.stack.imgur.com/55veX.png);
            width: 239px;
            height: 180px;
            background-position: -239px 0px;
        }