Html 如何在悬停时更改png的颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28707466/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change color of png on hover?
提问by pat
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
我在 illustrator 中制作了一个“向下箭头”，并将其保存为具有透明背景的 png。当我将它作为 img 放入我的网页时，它以原始颜色显示，这没关系。我正在尝试做
img:hover{color:red;}
and it doesn't work.
它不起作用。
Does anyone know how to make it work?
有谁知道如何使它工作？
Thanks
谢谢
回答by Alex Shesterov
If you target modern browsers, you may use CSS filters.
如果您的目标是现代浏览器，则可以使用CSS 过滤器。
The hue-rotatefilter is suitable for changing colors:
该hue-rotate过滤器是适合于改变颜色：
filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);
The exact amount of degrees depends on your image and expected results.
确切的度数取决于您的图像和预期结果。
Note that CSS filters is a new feature, and its browser support is limited.
请注意，CSS 过滤器是一项新功能，其浏览器支持有限。
Alternatively, you may use CSS spritestechnique, which works in all browsers of reasonable age.
或者，您可以使用CSS sprites技术，该技术适用于所有适龄浏览器。
回答by Richard Blyth
What you need to do is set the image as a background-image using CSS. Then set a hover state using another version of the image (with a different colour). For example:
您需要做的是使用 CSS 将图像设置为背景图像。然后使用另一个版本的图像（具有不同的颜色）设置悬停状态。例如：
.element {
background-image: url(your-image.png);
}
.element:hover {
background-image: url(your-image-hover-version.png);
}
Depending where you're putting the image/class, you'll need to assign appropriate height/width (or using padding).
根据您放置图像/类的位置，您需要分配适当的高度/宽度（或使用填充）。
回答by Kirk Powell
You can change the color of the image with an identical image of another color with an event (like hover).
您可以通过事件（如悬停）使用另一种颜色的相同图像更改图像的颜色。
html:
html：
<div id="cf">
<img class="bottom" src="/images/Windows%20Logo.jpg" />
<img class="top" src="/images/Turtle.jpg" />
</div>
css:
css：
#cf {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
In detail here: http://css3.bradshawenterprises.com/cfimg/
回答by kovalyovi
I was also wondering about an easy way to do it like:
我也想知道一种简单的方法来做到这一点：
.img:hover {
background: red;
}
or
或者
.img:hover {
color: red;
}
but no easy cross-browser support solutions were found. However, I found that some of the browser solutions were using SVG images that have a fillattribute which can be easily set by CSS.
但没有找到简单的跨浏览器支持解决方案。但是，我发现一些浏览器解决方案使用的 SVG 图像具有fill可以通过 CSS 轻松设置的属性。
However, if you use font-awesome (basically, it's a font where instead of characters you have different icons), it's easy to control with simple CSS attribute color, like in the secondexample
但是，如果您使用 font-awesome（基本上，它是一种字体，而不是具有不同图标的字符），则可以使用简单的 CSS 属性轻松控制color，就像在第二个示例中一样
So, if you want the easiest solution - find SVG images for your project that correspond to the ones you use. I found this process a little bit painful and decided to learn how to convert png and .jpgand .pngto .svg. There is a command-line tool that helps you do so and it's called potrace. One thing I would recommend looking at if you decide to use this tool is to use simple editors to contrast darkfor everything you want to have converted into pathfor the given .svgand white/light (not transparent)colors to the background and the areas you don't want to see in your .svgfile.
因此，如果您想要最简单的解决方案 - 为您的项目找到与您使用的图像相对应的 SVG 图像。我发现这个过程有点痛苦，于是决定学习如何PNG和转换.jpg和.png对.svg。有一个命令行工具可以帮助您执行此操作，它称为potrace。有一件事我会建议看，如果你决定使用这个工具是用简单的编辑器来对比黑暗对于要已经转换成的一切path对于给定的.svg和白/光（不透明）颜色的背景而你不知道的领域不想在你的.svg文件中看到。
回答by kovalyovi
Applying:
申请：
{color:red}
to any element means changing text color.
任何元素都意味着改变文本颜色。
Try changing:
尝试改变：
img:hover {color:red}
to:
到：
img:hover {background-image: url('<insert url to red arrow here>');}
and this works if you only have one image. If you have many images and you want only one to change on hover, then set an ID for the image you want to change and change img and img:hover to #x and #x:hover and replace x with the name you given for the ID.
如果您只有一张图片，这会起作用。如果您有很多图像并且只想在悬停时更改一个图像，请为要更改的图像设置一个 ID，并将 img 和 img:hover 更改为 #x 和 #x:hover 并将 x 替换为您指定的名称身。
Here's an example (assume other HTML is intact and properly formatted):
这是一个示例（假设其他 HTML 完整且格式正确）：
<style type="text/css">
#abc:hover {background-image: url('redarrow.png');}
</style>
<img ID="abc" src="normalarrow.png">
