使用css在悬停时更改图像的颜色

Question

当我在我的网页上有图像时。悬停图像颜色应该改为蓝色，第一个红色为第二个等等。现在图像是黑色和白色悬停图像的颜色应该是改变了。谢谢提前

这是我的代码：

<div class="ourexpertise">
                    <div id="content">
                    <img src="image/expertise/1.png"  />
                    <img src="image/expertise/2.png" />
                    <img src="image/expertise/3.png" />                     
                </div>
      </div>

Answer 1

您可以通过在图像上使用“background-color：rgba（255,0,0,0.5）”为红色创建叠加div来实现这一点，例如。 然而，这只会产生变色的“错觉”。要正确更改颜色，您应该使用HTML5画布，因为它涉及使用混合模式。 或者，您可以将黑白图片转换为图片，白色变为完全透明，黑色变为完全不透明。使用此图片作为具有固定颜色的div的叠加 - 一旦需要重新着色图像，就将固定颜色更改为红色或蓝色。