如何正确使用 css sprite？

Question

我正在尝试使用 css sprite 在图像的特定部分上移动一段文本。但我应用的背景位置似乎不起作用。我尝试更改背景位置，但文本部分（即 twitter、facebook）没有移动到正确的位置。

#fixedsocial {
	background:url("../img/socials/icon.png") no-repeat;          
    top:40%;    
    width:50px;
    height: 100px;
    position:fixed;
    left: 0; 
    display: block;
    z-index: 1000;   
    background-color: #eee;
    text-indent:-9999px;
}

.facebookflat {
    background-position: -200px 0;
    height:50px;
}

.facebookflat:hover {        
	cursor: pointer;
}

.twitterflat {    
	height:50px;
	background-position: -400px 0; 
}

.twitterflat:hover {    
	cursor: pointer;
}

<div id="fixedsocial">
  <div class="facebookflat" id="shareBtn"></div>
  <div class="twitterflat"> <a href="https://twitter.com/share" data-show-count="false"></a> </div>
</div>

Answer 1

它不起作用的原因是您将背景图像分配给容器 div (#fixedsocial)，并尝试调整内部 div 上的定位，它没有背景定位。您需要重新考虑一下您的 CSS，因为您必须将背景分配到您真正想要使用它的位置。

这是一个小提琴：https://jsfiddle.net/j7kyhgmc/

#fixedsocial {
top:40%;    
width:50px;
height: 100px;
position:fixed;
left: 0; 
display: block;
z-index: 1000;   
background-color: #eee;
}

.facebookflat {
background: url("https://i.stack.imgur.com/LR6bK.png") no-repeat;
background-position: -168px -161px;
background-size: 1430% 1430%;
height:50px;
width: 50px;
}

 .facebookflat:hover {        
     cursor: pointer;
  }

  .twitterflat {    
background: url("https://i.stack.imgur.com/LR6bK.png") no-repeat;
background-position: -430px -161px;
background-size: 1420% 1420%;
height:50px;
width: 50px;
   }

   .twitterflat:hover {    
       cursor: pointer;
   }

<div id="fixedsocial">
     <div class="facebookflat" id="shareBtn"></div>
     <div class="twitterflat">
          <a href="https://twitter.com/share" data-show-count="false"></a>
     </div> 
</div>