精灵表图像未显示答案

【问题标题】：Sprite sheet images not showing精灵表图像未显示
【发布时间】：2019-02-20 19:31:10
【问题描述】：

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

有什么明显的我做错了吗？

.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

【问题讨论】：

标签： html css sprite-sheet

【解决方案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>

【讨论】：