精灵表图像未显示

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>