我需要更改图像的背景颜色.图像是带有白色背景的圆形图像,当您将鼠标悬停在图像上时,我需要将圆形图像的背景更改为蓝色.我只需要改变圆圈.
<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
解决方法
理想情况下,您应该使用透明的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;
}
