如何使用CSS圖像精靈（不起作用）

Question

我在網站上有幾個列表項目，都將包含背景圖像。因爲它更高效，所以需要使用精靈。我已經產生了我的精靈在網上，你可以在這裏看到：

對於精靈的CSS是：

.sprite-app{ background-position: 0 0; width: 100px; height: 103px; } 
.sprite-badge{ background-position: 0 -153px; width: 30px; height: 30px; } 
.sprite-badge2x{ background-position: 0 -233px; width: 60px; height: 60px; } 
.sprite-blog{ background-position: 0 -343px; width: 100px; height: 100px; } 
.sprite-google{ background-position: 0 -493px; width: 100px; height: 100px; } 
.sprite-googleplus{ background-position: 0 -643px; width: 100px; height: 100px; } 
.sprite-linkedin{ background-position: 0 -793px; width: 100px; height: 100px; } 
.sprite-photoshop{ background-position: 0 -943px; width: 100px; height: 103px; } 
.sprite-vkontakte{ background-position: 0 -1096px; width: 100px; height: 100px; } 

我的應用程序列表中的HTML是：

<ul class = "apps"> 

<li class = "App" id = "app"> 
    <div class = "icon"><img src="appspics/app.png"/></div> 
    <div class = "badge">2</div> 
    <div class = "caption">App</div> 
</li> 


<li class = "App" id = "linkedin"> 
    <div class = "icon"></div> 
    <div class = "caption">LinkedIn</div> 
</li> 

<li class = "App" id="google"> 
    <div class = "icon"></div> 
    <div class = "badge">2</div> 
    <div class = "caption">Google</div> 
</li> 

<li class = "App" id="googleplus"> 
    <div class = "icon"></div> 
    <div class = "badge">5</div> 
    <div class = "caption">Google+</div> 
</li> 

<li class = "App" id = "vkontakte"> 
    <div class = "icon"></div> 
    <div class = "caption">Vkontakte</div> 
</li> 


<li class = "App" id = "photoshop"> 
    <div class = "icon"></div> 
    <div class = "caption">Photoshop</div> 
</li> 


<li class = "App" id = "blog"> 
    <div class = "icon"></div> 
    <div class = "badge">15</div> 
    <div class = "caption">Blog</div> 
</li> 

正如你可以看到每個列表項都有一個ID。我想用它來添加背景作爲CSS中的精靈的相關部分。

這樣的工作示例會非常有幫助，因爲我無法做最後一步顯示我的精靈。

編輯編輯編輯：

這是我目前的CSS，仍然沒有得到結果。它不顯示圖像：

.App{ 
    background-image: url(appspics/sprite.png); 
    background-repeat: no-repeat; 
    border-radius: 0px; 
    width: 120px; 
    height: 120px; 
    float: left; 
    background-color: red; 
} 

#app{ 
    background-position: 0 -173px; 
} 

.sprite-app{ background-position: 0 0; width: 100px; height: 103px; } 
.sprite-badge{ background-position: 0 -153px; width: 30px; height: 30px; } 
.sprite-badge2x{ background-position: 0 -233px; width: 60px; height: 60px; } 
.sprite-blog{ background-position: 0 -343px; width: 100px; height: 100px; } 
.sprite-google{ background-position: 0 -493px; width: 100px; height: 100px; } 
.sprite-googleplus{ background-position: 0 -643px; width: 100px; height: 100px; } 
.sprite-linkedin{ background-position: 0 -793px; width: 100px; height: 100px; } 
.sprite-photoshop{ background-position: 0 -943px; width: 100px; height: 103px; } 
.sprite-vkontakte{ background-position: 0 -1096px; width: 100px; height: 100px; } 

這些解決方案不是爲我工作

Answer 1

添加代表你的精靈給每個列表項的這樣的背景，地位知道指的背景圖像。 ..

也不要直接將你的精靈生成的類應用到你的列表項，除非你想讓你的頁面中斷。

這樣來做：

li:before{ 
    background-image: url("my_sprite.png"); 
    background-repeat: no-repeat; 
    content: " "; 
    display: inline-block; 
} 

li#linkedin:before{ 
    background-position: 0 -793px; 
    width: 100px; 
    height: 100px; 
} 

Answer 2

Make a class with common name "class_one" 

.class_one{ 
background-image: url("my_sprite.png"); 
background-repeat: no-repeat; 
display: inline-block; 
width: 100px; 
} 

And to every LI TAG where you want to set the background-image use the property 
BACKGROUND-POSITION and set according to your layout. 

BY MAYANK GROVER (http://mayank-grover.me)