如何在悬停时更改png的颜色？

Question

我在插画家中制作了一个"向下箭头"并将其保存为具有透明背景的png.当我把它作为img放入我的网页时,它以原始颜色显示,这没关系.我正在努力做到

  img:hover{color:red;}

它不起作用.

有谁知道如何使它工作？

谢谢

Answer 1

如果您定位现代浏览器,则可以使用CSS过滤器.

该hue-rotate过滤器是适合于改变颜色:

filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);

确切的度数取决于您的图像和预期结果.

请注意,CSS过滤器是一项新功能,其浏览器支持有限.

或者,您可以使用CSS sprites技术,该技术适用于所有合理年龄的浏览器.

Answer 2

您需要做的是使用 CSS 将图像设置为背景图像。然后使用图像的另一个版本（具有不同的颜色）设置悬停状态。例如：

.element {
  background-image: url(your-image.png);
}

.element:hover {
  background-image: url(your-image-hover-version.png);
}

根据您放置图像/类的位置，您需要分配适当的高度/宽度（或使用填充）。