Html 如何在悬停时更改图像的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9047134/
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 the color of an image on hover
提问by HTML Man
I need to change the background color of an image. The image is a circle image with white background, I need when you hover over it change the background of the circle image to blue. I need only the circle to be change.
我需要更改图像的背景颜色。该图像是白色背景的圆形图像，当您将鼠标悬停在它上面时，我需要将圆形图像的背景更改为蓝色。我只需要改变圆圈。
My HTML code is
我的 HTML 代码是
<div class="fb-icon">
<a href="http://www.facebook.com/mypage" target="_blank">
<img src="images/fb_normal.png" alt="Facebook">
</a>
</div>
In CSS I wrote:
在 CSS 中，我写道：
.fb-icon:hover {
background: blue;
}
The above code gives me blue color but as a frame around the circle icon. what I need is to change the background of the circle itself. Imagine it's like a signal it's white when you hover by mouse it goes to blue.
上面的代码给了我蓝色，但作为圆形图标周围的框架。我需要的是改变圆圈本身的背景。想象一下，当你用鼠标悬停时，它就像一个信号，它是白色的，它变成蓝色。
Please I need a solution if it can be done by CSS or whatever. Sorry if I make it too long.
如果可以通过 CSS 或其他方式完成，请我需要一个解决方案。对不起，如果我写得太长了。
The problem: link
问题：链接
采纳答案by Sagar Patil
Ideally you should use a transparent PNG with the circle in white and the background of the image transparent. Then you can set the background-colorof the .fb-iconto blue on hover. So you're CSS would be:
理想情况下，您应该使用带有白色圆圈和透明图像背景的透明 PNG。然后您可以在悬停时将background-color的 设置.fb-icon为蓝色。所以你的 CSS 将是：
fb-icon{
background:none;
}
fb-icon:hover{
background:#0000ff;
}
Additionally, if you don't want to use PNG's you can also use a sprite and alter the background position. A sprite is one large image with a collection of smaller images which can be used as a background image by changing the background position. So for eg, if your original circle image with the white background is 100px X 100px, you can increase the height of the image to 100px X 200px, so that the top half is the original image with the white background, while the lower half is the new image with the blue background. Then you set setup your CSS as:
此外，如果您不想使用 PNG，您还可以使用精灵并更改背景位置。精灵是一张大图像，其中包含一组较小的图像，可以通过更改背景位置将其用作背景图像。因此，例如，如果您的原始白色背景圆形图像是100px X 100px，您可以将图像的高度增加到100px X 200px，以便上半部分是具有白色背景的原始图像，而下半部分是蓝色背景的新图像。然后将 CSS 设置为：
fb-icon{
background:url('path/to/image/image.png') no-repeat 0 0;
}
fb-icon:hover{
background:url('path/to/image/image.png') no-repeat 0 -100px;
}
回答by Luke Douglas
It's a bit late but I came across this post.
有点晚了，但我看到了这篇文章。
It's not perfect but here's what I do.
这并不完美，但这就是我所做的。
HTML Code
HTML代码
<div class="showcase-menu-social"><img class="margin-left-20" src="images/graphics/facebook-50x50.png" alt="facebook-50x50" width="50" height="50" /><img class="margin-left-20" src="images/graphics/twitter-50x50.png" alt="twitter-50x50" width="50" height="50" /><img class="margin-left-20" src="images/graphics/youtube-50x50.png" alt="youtube-50x50" width="50" height="50" /></div>
CSS Code
CSS 代码
.showcase-menu {
margin-left:20px;
margin-right:20px;
padding: 0px 20px 0px 20px;
background-color: #C37500;
behavior: url(/css/border-radius.htc);
border-radius: 20px;
}
.showcase-menu-social img:hover {
background-color: #C37500;
opacity:0.7 !important;
filter:alpha(opacity=70) !important; /* For IE8 and earlier */
box-shadow: 0 0 0px #000000 !important;
}
Now my border radius of 20px matches up exactly with the image border radius. As you can see the .showcase-menu has the same background as the .showcase-menu-social. What this does is to allow the 'opacity' to take effect and no 'square' background or border shows, thus the image slightly reduces it's saturation on hover.
现在我的 20px 边框半径与图像边框半径完全匹配。如您所见，.showcase-menu 与 .showcase-menu-social 具有相同的背景。这样做是为了让“不透明度”生效并且没有“方形”背景或边框显示，因此图像在悬停时略微降低了饱和度。
It's a nice effect and does give the viewer the feedback that the image is in focus. I'm fairly sure on a darker background, it would have even a better effect.
这是一个很好的效果，并且确实给了观看者图像清晰的反馈。我相当确定在较暗的背景下，它会产生更好的效果。
The nice thing is that this is valid HTML-CSS code and will validate. To be honest, it should work on non-image elements just as good as images.
好消息是这是有效的 HTML-CSS 代码并且会验证。老实说，它应该和图像一样适用于非图像元素。
Enjoy!
享受！
回答by Willster
An alternative solution would be to use the new CSS mask image functionality which works in everything apart from IE (still not supported in IE11). This would be more versatile and maintainable than some of the other solutions suggested here. You could also more generally use SVG. e.g.
另一种解决方案是使用新的 CSS 蒙版图像功能，该功能适用于除 IE 之外的所有内容（在 IE11 中仍不受支持）。与此处建议的其他一些解决方案相比，这将更具通用性和可维护性。您也可以更普遍地使用 SVG。例如
item { mask: url('/mask-image.png'); }
There is an example of using a mask image here:
这里有一个使用蒙版图像的示例：
http://codepen.io/zerostyle/pen/tHimv
and lots of examples here:
这里有很多例子：
http://codepen.io/yoksel/full/fsdbu/
回答by brytebee
If the icon is from Font Awesome (https://fontawesome.com/icons/) then you could tap into the color css property to change it's background.
如果图标来自 Font Awesome ( https://fontawesome.com/icons/)，那么您可以点击 color css 属性来更改它的背景。
fb-icon{
color:none;
}
fb-icon:hover{
color:#0000ff;
}
This is irrespective of the color it had. So you could use an entirely different color in its usual state and define another in its active state.
这与它的颜色无关。因此，您可以在通常状态下使用完全不同的颜色，并在活动状态下定义另一种颜色。
回答by Oliver Ni
Use the background-color property instead of the background property in your CSS.
So your code will look like this:.fb-icon:hover {background: blue;}
在 CSS 中使用 background-color 属性而不是 background 属性。所以你的代码看起来像这样：.fb-icon:hover {background: blue;}
回答by Juank
Ok, try this:
好的，试试这个：
Get the image with the transparent circle - http://i39.tinypic.com/15s97vd.pngPut that image in a html element and change that element's background color via css. This way you get the logo with the circle in the color defined in the stylesheet.
获取带有透明圆圈的图像 - http://i39.tinypic.com/15s97vd.png将该图像放入 html 元素并通过 css 更改该元素的背景颜色。通过这种方式，您可以获得带有样式表中定义颜色的圆圈的徽标。
The html
html
<div class="badassColorChangingLogo">
<img src="http://i39.tinypic.com/15s97vd.png" />
Or download the image and change the path to the downloaded image in your machine
</div>
The css
css
div.badassColorChangingLogo{
background-color:white;
}
div.badassColorChangingLogo:hover{
background-color:blue;
}
Keep in mind that this wont work on non-alpha capable browsers like ie6, and ie7. for ie you can use a js fix. Google ddbelated png fix and you can get the script.
请记住，这不适用于 ie6 和 ie7 等不支持 alpha 的浏览器。例如，您可以使用 js 修复程序。谷歌 ddbelated png 修复，你可以获得脚本。
回答by backdesk
If I understand correctly then it would be easier if you gave your image a transparent background and set the background container's background-color property without having to use filters and so on.
如果我理解正确，那么如果您为图像提供透明背景并设置背景容器的背景颜色属性而无需使用过滤器等，则会更容易。
http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html
http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html
Shows you how to use filters in IE. Maybe if you leverage something from that. Not very cross-browser compatible though. Another option might be to have two images and use them as background-images (rather than img tags), swap one out after another using the :hover pseudo selector.
向您展示如何在 IE 中使用过滤器。也许如果你从中利用一些东西。虽然不是很跨浏览器兼容。另一种选择可能是拥有两个图像并将它们用作背景图像（而不是 img 标签），使用 :hover 伪选择器一个接一个地交换。
