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

发布时间：2020-12-14 18:38:16 所属栏目：资源来源：网络整理

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

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

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

解决方法

理想情况下,您应该使用透明的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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!