将颜色叠加应用于HTML页面中的图片

Question

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

当您将该图片悬停时，我希望将其更改为红色，我的CSS也会使用文本链接。

我考虑了几个选项：

• 使用'LEFT-POINTING MAGNIFYING GLASS' (U+1F50D) character。这对于不支持大量Unicode字符的（越来越少）客户端不起作用;但是当它工作时，它不能保证产生单色字符（在Apple实现中，它是一个全彩色表情符号）。
• 使用掩码，described in this other similar question。这只适用于你不介意不透明的背景（我的不不透明）或你可以非常确定地告诉你元素下面的东西（然后它相当hackish和丑陋）。

我目前的解决方案是使用不同的图片来表示白色放大镜以及当您将鼠标悬停在图片上时更改的红色放大镜。这是一个很好的解决方案，但我想知道是否有一种方法可以只有一张只有一种颜色的图片，所以如果我改变主意，我就不必再改变图像颜色了。 / p>

我已经在广泛使用CSS3和HTML5，所以我不介意深入，只要它得到每个主要浏览器的最新迭代的支持。

Answer 1

摆弄这些数字以获得你的颜色。

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

Found here - 提供更多选项