Question

我需要更改图像的背景颜色。图像是带有白色背景的圆形图像，当您将鼠标悬停在其上时，我需要将圆形图像的背景更改为蓝色。我只需要改变圆圈。

我的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

Answer 1

理想情况下，您应该使用透明的PNG，圆圈为白色，图像背景透明。然后，您可以在悬停时将background-color的{{1}}设置为蓝色。所以你的CSS就是：

.fb-icon

此外，如果你不想使用PNG，你也可以使用精灵并改变背景位置。精灵是一个大图像，带有一组较小的图像，可以通过改变背景位置用作背景图像。因此，例如，如果您的原始圆形图像具有白色背景 100px X 100px ，则可以将图像的高度增加到 100px X 200px ，以便上半部分是具有白色背景的原始图像，而下半部分是具有蓝色背景的新图像。然后将CSS设置为：

fb-icon{
    background:none;
}

fb-icon:hover{
    background:#0000ff;
}

Answer 2

有点晚了，但我发现了这篇文章。

这不完美，但这就是我的工作。

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菜单与.showcase-menu-social具有相同的背景。这样做是为了让'不透明度'生效并且没有'方形'背景或边框显示，因此图像会略微降低它在悬停时的饱和度。

这是一个很好的效果，并确实为观众提供了图像聚焦的反馈。我相当肯定在较暗的背景下，它会产生更好的效果。

好消息是这是有效的HTML-CSS代码并将进行验证。说实话，它应该像非图像元素一样对非图像元素起作用。

享受！

Answer 3

另一种解决方案是使用新的CSS掩码图像功能，该功能适用于IE以外的所有功能（IE11中仍然不支持）。这将比这里提出的一些其他解决方案更通用和可维护。你也可以更普遍地使用SVG。 e.g。

item { mask: url('/mask-image.png'); }

这里有一个使用蒙版图像的例子：

http://codepen.io/zerostyle/pen/tHimv

这里有很多例子：

http://codepen.io/yoksel/full/fsdbu/

Answer 4

如果我理解正确，那么如果你给你的图像一个透明的背景并设置背景容器的background-color属性而不必使用过滤器等等会更容易。

http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html

显示如何在IE中使用过滤器。也许如果你利用那些东西。虽然不是非常跨浏览器兼容。另一个选择可能是有两个图像并将它们用作背景图像（而不是img标签），使用：hover伪选择器交换一个接一个。

Answer 5

好的，试试这个：

使用透明圆圈获取图片 - http://i39.tinypic.com/15s97vd.png 将该图像放在html元素中，并通过css更改该元素的背景颜色。这样，您就可以使用样式表中定义的颜色获得带圆圈的徽标。

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>

css

div.badassColorChangingLogo{
    background-color:white;
}
div.badassColorChangingLogo:hover{
    background-color:blue;
}

请记住，这不适用于非alpha功能的浏览器，如ie6和ie7。因为你可以使用js修复。谷歌ddbelated png修复，你可以得到脚本。

Answer 6

在CSS中使用background-color属性而不是background属性。所以你的代码看起来像这样：
.fb-icon:hover { {
{1}} {
{1}}

Answer 7

如果图标来自“真棒字体（https://fontawesome.com/icons/）那么您可以点击color css属性来更改背景。

fb-icon{
color:none;
}

fb-icon:hover{
color:#0000ff;
}

这与它的颜色无关。因此，您可以在其通常状态下使用完全不同的颜色，并在其活动状态下定义另一种颜色。

Answer 8

最好的方法是使用 svg 图像，其中背景为白色矩形，前景为圆形，并将悬停属性设置为 bg。这是一个矢量图形图像，因此它在任何屏幕尺寸上看起来都不错，更不用说 svg 旨在用于网络。这个 svg 应该只是一些字节，它的渲染效果比任何光栅或位图图像都要好。

如何在悬停时更改图像的颜色

8 个答案: