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

概述我需要更改图像的背景颜色.图像是带有白色背景的圆形图像,当您将鼠标悬停在图像上时,我需要将圆形图像的背景更改为蓝色.我只需要改变圆圈. 我的HTML代码是 <div class="fb-icon"><a href="http://www.facebook.com/mypage" target="_blank"><img src="images/fb_normal.png" alt="Faceb 我需要更改图像的背景颜色.图像是带有白色背景的圆形图像,当您将鼠标悬停在图像上时,我需要将圆形图像的背景更改为蓝色.我只需要改变圆圈.

我的HTML代码是

<div ><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

解决方法 理想情况下,您应该使用透明的PNG,圆圈为白色,图像背景透明.然后,您可以在悬停时将.fb图标的背景颜色设置为蓝色.所以你的CSS将是：

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

此外,如果您不想使用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;}

总结

以上是内存溢出为你收集整理的html – 如何在悬停时更改图像的颜色全部内容，希望文章能够帮你解决html – 如何在悬停时更改图像的颜色所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。