精灵表图像未显示

Posted 2023-03-25

【中文标题】精灵表图像未显示

【英文标题】：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

【参考方案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>