-1

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

带有放大镜覆盖的图片

当您悬停该图片时，我希望它变为红色，就像我的 CSS 中的文本链接一样。

我考虑了几个选项：

  • 使用一个'LEFT-POINTING MAGNIFYING GLASS' (U+1F50D)字符。这不适用于（越来越少）不支持大量 Unicode 字符集的客户端；但是当它起作用时，不能保证产生单色字符（在 Apple 实现中，它是全彩表情符号）。
  • 使用面具，如其他类似问题中所述。这仅在您不介意不透明的背景（我的不是不透明的）或者当您可以非常确定地分辨出您的元素下方的内容时才有效（然后它是相当骇人听闻和丑陋的）。

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

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

4

1 回答 1

0

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

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

在这里找到- 更多可用选项

于 2013-10-27T00:16:40.960 回答