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

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

问题：链接

6 个解决方案

#1

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-color of the .fb-icon to blue on hover. So you're CSS would be:

理想情况下，您应该使用透明的PNG，圆圈为白色，图像背景透明。然后，您可以在悬停时将.fb图标的背景颜色设置为蓝色。所以你的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;
}

#2

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菜单与.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!

请享用！

#3

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/

#4

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.

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

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伪选择器一个接一个地交换。

#5

Ok, try this:

好的，试试这个：

Get the image with the transparent circle - http://i39.tinypic.com/15s97vd.png Put 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.

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

#6

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; }

#1