Question

不显示精灵翻转图像。

目标是拥有一排带有由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;
}

HTML：

<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>

Answer 1

您正尝试在background-image内设置背景位置。

改变这个：

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

对此：

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

Answer 2

问题：您正在使用background-position background-image属性

解决方案：仅使用background属性或单独使用background-position

background: color url(src) repeat position;

或

background-image: url(src);
background-position: position;

您的代码应该是这样的：

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

注意：您应该使用非零数字的px（或任何其他单位），并且应该在没有单位的情况下使用零。

精灵没有显示

2 个答案: