html - 在悬停时添加颜色叠加

Question

我想实现这个功能，如图所示。

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

更新

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

Answer 1

这是可能的webkit-filter。

请尝试未悬停的图像：

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

然后将所有过滤器放在悬停上：

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

您必须知道，并非所有浏览器都支持-webkit-filter. 检查此页面也是个好主意。它将帮助您找到正确的值。

Answer 2

使用可以在悬停时使用两个图像你可以显示第二个图像并隐藏第一个图像。类似地你可以用第二个图像执行此操作

Answer 3

建议这里是一个使用精灵 演示的解决方案

<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;
        }