没有显示精灵表图像

Question

我正在为我的社交媒体按钮使用精灵表，但我无法显示图像......？

有什么明显我做错了吗？

.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

Answer 1

下面是使用您提供的图像的示例。

• 在悬停时，您需要更改精灵的背景位置
• 精灵本身不包含社交图像的正确大小

.socials .facebook {
  background: url(https://i.stack.imgur.com/WwCI4.png) -18px -13px;
  width: 40px;
  height: 40px;
  display: block;
}

.socials .facebook:hover {
  background: url(https://i.stack.imgur.com/WwCI4.png) -18px -105px;
}

<div class="socials">
  <a class="facebook" target="_blank" href="http://facebook.com"></a>
</div>