如何在悬停时更改png的颜色？ [英] How to change color of png on hover?

问题描述

我在Illustrator中制作了一个向下箭头，并将其另存为具有透明背景的png。当我将其作为img放入网页时，它以原始颜色显示，没关系。
我正在尝试

I made a "down arrow" in illustrator and saved it as a png with a transparent background. When I put it into my webpage as an img, it shows up in the original color, which is okay. I'm trying to do

  img:hover{color:red;}

，它不起作用。

有人知道如何使它工作吗？

Does anyone know how to make it work?

谢谢

推荐答案

如果您针对现代浏览器，则可以使用 CSS过滤器。

If you target modern browsers, you may use CSS filters.

色相旋转过滤器适合更改颜色：

The hue-rotate filter is suitable for changing colors:

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

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

The exact amount of degrees depends on your image and expected results.

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

Note that CSS filters is a new feature, and its browser support is limited.

或者，您可以使用 CSS Sprites 技术，该技术适用于所有年龄适当的浏览器。

Alternatively, you may use CSS sprites technique, which works in all browsers of reasonable age.

这篇关于如何在悬停时更改png的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！