Css 精灵不显示

未显示精灵滚动图像

目标是拥有一行由CSS控制的滚动图标

目前，下面的代码没有显示任何图像…我缺少什么

CSS:

    #social {
    margin: 0; 
    padding: 0; 
    height: 15px;
}
#social li {
    margin: 0 5px 0 0; 
    padding: 0; 
    list-style-type: none; 
    display: inline; 
    height: 15px;
    float: left;
}
#social li.last{
    margin-right:0px;
}
#social li a {
    background-image: url("../images/icon_twitter.png") 0px 0px; 
    background-repeat: no-repeat;
    display: block;
    height: 15px;
    width: 18px;
}
#social li#social-twitter a{
    background-position: 0px 0px;
}
#social li#social-twitter a:hover {
    background-position: 0px -15px;
}
#social li#social-youtube a{
    background-position: -18 top;
}
#social li#social-youtube a:hover {
    background-position: -18 -15px;
}
#social span {
    display: none;
}

<ul id="social">
<li id="social-twitter"><a href="#"><span>Twitter</span></a></li>
<li id="social-youtube" class="last"><a href="#"><span>Youtube</span></a></li>
</ul> 

HTML:

    #social {
    margin: 0; 
    padding: 0; 
    height: 15px;
}
#social li {
    margin: 0 5px 0 0; 
    padding: 0; 
    list-style-type: none; 
    display: inline; 
    height: 15px;
    float: left;
}
#social li.last{
    margin-right:0px;
}
#social li a {
    background-image: url("../images/icon_twitter.png") 0px 0px; 
    background-repeat: no-repeat;
    display: block;
    height: 15px;
    width: 18px;
}
#social li#social-twitter a{
    background-position: 0px 0px;
}
#social li#social-twitter a:hover {
    background-position: 0px -15px;
}
#social li#social-youtube a{
    background-position: -18 top;
}
#social li#social-youtube a:hover {
    background-position: -18 -15px;
}
#social span {
    display: none;
}

<ul id="social">
<li id="social-twitter"><a href="#"><span>Twitter</span></a></li>
<li id="social-youtube" class="last"><a href="#"><span>Youtube</span></a></li>
</ul> 

您正试图在

背景图像中设置背景位置

更改此项：

background-image: url("../images/icon_twitter.png") 0px 0px; 

为此：

background-image: url("../images/icon_twitter.png"); 
background-position: 0px 0px; 

问题：您正在将
背景位置
与
背景图像
属性一起使用

解决方案：要么只使用
背景
属性，要么单独使用
背景位置

background: color url(src) repeat position;

或

您的代码应该如下所示：

background: url("../images/icon_twitter.png") 0 0 no-repeat;

注意：您应使用非零数字的
px
（或任何其他单位），零应不带单位使用
 
背景位置：-18顶18缺少
单元
；-）你确定图像是正确的吗？它名为icon_twitter
也要确保它不是404或者只是：background:url（“../images/icon_twitter.png”）0px 0px；背景位置修正了它！谢谢。@user2970432，很好！如果您对此答案感到满意，可以将其标记为“已接受”，我们将不胜感激：）