html - 雪碧表图像不显示

Question

我正在为我的社交媒体按钮使用 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

Answer 1

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

• 悬停时，您需要更改 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>