如何使用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)