对HTML页面中的图片应用颜色覆盖

我有一张PNG图片，代表一个带有alpha通道的单色白色放大镜。此图像覆盖在其他图片的顶部，具有半透明背景，以便您仍能看到其下方：

当你将图片悬停时，我希望它变成红色，就像我的CSS中的文本链接一样

我考虑过几个选择：

• 使用一个。对于（越来越少）不支持大量Unicode字符集的客户机来说，这是行不通的；但当它工作时，并不保证会产生单色字符（在苹果的实现中，它是一个全色表情符号）
• 使用面具，例如。只有当你不介意不透明的背景时（我的背景是不不透明），或者当你可以非常确定地分辨出元素下面的内容时（然后是相当粗糙和难看的）

我目前的解决方案是使用不同的图片来表示白色放大镜和红色放大镜，当您将鼠标悬停在图片上时，它会发生变化。这是一个不错的解决方案，但我想知道是否有一种方法可以让我只拥有一张只有一种颜色的图片，这样，如果我改变了对颜色的想法，我就不必回去改变图像的颜色

---

我已经在广泛使用CSS3和HTML5，所以只要每个主要浏览器的最新版本都支持它，我不介意深入研究。

摆弄上面的数字以获得您的颜色

img.magnify:hover {
  filter: hue-rotate(20deg);
  -webkit-filter: hue-rotate(20deg);
  -moz-filter: hue-rotate(20deg);
  -o-filter: hue-rotate(20deg);
  -ms-filter: hue-rotate(20deg);
}

---

-更多可用选项

您是否考虑过使用SVG而不是PNG？您可以使用CSS动态调整

fill

属性。@lukiffer，我想我可以，但它不是矢量图像（虽然我可以花一些时间制作矢量版本）。此外，请检查-它有一些现成的放大镜图标，是一种通常很有用的方法，即使您不使用引导。在这种情况下，您只需调整

颜色

属性。是的，字体真棒是难以置信的。你会喜欢这样的。旧的IE浏览器也支持它。这很好，但它缺乏支持。Firefox目前无法进行任何筛选。（另一方面，它可能不仅仅是旋转色调从白色变为红色。）还有饱和度需要调整。但我知道支持率很低，只是想给你一些东西，以防你找不到其他东西