使用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

例如，您可以通过在图像上使用“背景颜色：rgba(255, 0, 0, 0.5)”为红色创建覆盖 div 来实现这一点。 但是，这只会造成颜色变化的“错觉”。要正确更改颜色，您确实应该使用 HTML5 画布，因为它涉及使用混合模式。 或者，您可以将黑白图片转换为图片，其中白色变得完全透明，黑色变得完全不透明。将此图片用作具有固定颜色的 div 的叠加层 - 需要重新着色图像时立即将固定颜色更改为红色或蓝色。