如何在悬停时更改图像的颜色
我需要更改图像的背景颜色。图像是一个白色背景的圆形图像，我需要当您将鼠标悬停在它上面时，将圆形图像的背景更改为蓝色。我只需要改变圆圈。
我的HTML代码是
<div class="fb-icon">
<a href="http://www.facebook.com/mypage" target="_blank">
<img src="images/fb_normal.png" alt="Facebook">
</a>
</div>在CSS中，我写道：
.fb-icon:hover {
background: blue;
}上面的代码给我的颜色是蓝色的，但它是圆形图标周围的边框。我需要的是改变圆圈本身的背景。想象一下，它就像一个信号，当你用鼠标悬停时，它是白色的，它变成了蓝色。
请我需要一个解决方案，如果它可以通过CSS或任何东西。如果我做得太长了，很抱歉。
问题：link
回答 8
Stack Overflow用户
发布于 2012-01-29 01:41:17
理想情况下，您应该使用透明的PNG，圆形为白色，图像的背景为透明。然后，您可以在悬停时将.fb-icon的background-color设置为蓝色。所以你的CSS应该是：
fb-icon{
background:none;
}
fb-icon:hover{
background:#0000ff;
}另外，如果你不想使用PNG，你也可以使用sprite来改变背景位置。精灵是一个大图像，其中包含一组较小的图像，可以通过改变背景位置来用作背景图像。因此，例如，如果您的白色背景的原始圆形图像是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;
}Stack Overflow用户
发布于 2013-07-18 15:00:06
有点晚了，但我偶然发现了这篇文章。
它不是完美的，但这是我要做的。
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代码
.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;
}现在，我的20px边界半径与图像边界半径完全匹配。正如您所看到的，.showcase-menu具有与.showcase-menu-social相同的背景。这样做是为了让“不透明度”生效，并且没有“方形”背景或边框显示，因此图像在悬停时略微降低了饱和度。
这是一个很好的效果，确实给了观众反馈，图像是对焦的。我相当确定在较暗的背景下，它会有更好的效果。
好消息是，这是有效的HTML-CSS代码，可以进行验证。说实话，它在非图像元素上的效果应该和图像一样好。
享受吧！
Stack Overflow用户
发布于 2014-08-15 19:04:37
另一种解决方案是使用新的CSS遮罩图像功能，该功能可以在除IE以外的所有应用程序中运行(IE11仍然不支持)。这将比这里建议的其他一些解决方案更具通用性和可维护性。您还可以更一般地使用SVG。例如：
item { mask: url('/mask-image.png'); }这里有一个使用蒙版图像的示例：
http://codepen.io/zerostyle/pen/tHimv这里有很多例子：
http://codepen.io/yoksel/full/fsdbu/https://stackoverflow.com/questions/9047134
复制相似问题
腾讯云开发者
