如何正確使用css sprite？

Question

我正在嘗試使用CSS sprites移動圖像的特定部分上的一段文字。但我應用的背景位置似乎不起作用。我試圖改變背景位置，但文本部分（即twitter，臉書）不移動到正確的位置。

#fixedsocial { 
 
\t 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 {   
 
\t cursor: pointer; 
 
} 
 

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

 
.twitterflat:hover {  
 
\t 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>