我正在为我的社交媒体按钮使用 sprite 表,但我无法显示图像...?
我做错了什么很明显吗?
.socials {
display: inline-block;
width: 40px;
height: 40px;
overflow: auto;
}
#menubar_top .socials .facebook .fb {
background: url(images/social-media-logo-set1.png) 0px 0px;
width: 40px;
height: 40px;
}
#menubar_top .socials .facebook .fb:hover {
background: url(images/social-media-logo-set1.png) 0px 0px;
}
<div class="socials">
<a class="facebook" target="_blank" href="http://facebook.com"><img class="fb" src="images/placeholders/40x40.png" /></a>
</div>
这是图片: socials sprite sheet
最佳答案
下面是使用您提供的图像的示例。
- 悬停时,您需要更改 Sprite 的背景位置
- Sprite 本身不包含社交图像的正确尺寸
.socials .facebook {
background: url(/image/WwCI4.png) -18px -13px;
width: 40px;
height: 40px;
display: block;
}
.socials .facebook:hover {
background: url(/image/WwCI4.png) -18px -105px;
}
<div class="socials">
<a class="facebook" target="_blank" href="http://facebook.com"></a>
</div>
关于html - 雪碧表图像不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52358169/