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

将代表您的精灵的背景图像添加到您的每个列表项中，以便背景位置知道要引用什么...

也不要直接将 sprite 生成的类应用于列表项，除非您希望页面中断。

这样做：

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)