Question

请查看以下代码：

<div class="features">
    <h1>BLAH BLAH</h1>
    <ul>
        <li>
           <span class="navigate-best"><img class="gourmet">Gourmet</span>
        </li>
        <li>
           <span class="navigate-best"><img class="north">North</span>
        </li>
    </ul>
</div>

这是html。以下是CSS

.features ul li  span img{
    background: url(../images/result.png) no-repeat;
    float: left;
    margin-left: -10px;
    margin-top: 3px;
    padding-right:10px;
}

.gourmet{
    background-position: -0px -400px;
    width: 16px; 
    height: 16px;
}

.dessert{
    background-position: -0px -108px;
    width: 16px;
    height: 16px;
}

实际上navigate-best是一个显示类似按钮的链接的类，我正在尝试添加使用CSS sprites在每个按钮左端的图像。

对于名为＆＃39; Gourmet＆＃39;的按钮说。我有一个名为gourmet的类，精灵中的相应图像位于-0px -400px，但这不起作用。我得到的只是精灵中的第一个图像。每个按钮都会发生这种情况我做错了什么？

Answer 1

看起来像specificity问题。

.features ul li span img{
    background: url(../images/result.png) no-repeat;
    border:0 none; /* Oh god no!! In google chrome a border is being added to the images. */
    float: left;
    margin-left: -10px;
    margin-top: 3px;
    padding-right:10px;
}

试试这个：

.features ul li span img.gourmet{
    background-position: -0px -400px;
    width: 16px; 
    height: 16px;
}

.features ul li span img.dessert{
    background-position: -0px -108px;
    width: 16px;
    height: 16px;
}

但是可以肯定的是，如果没有像jsFiddle这样的工作示例，我无法确定你的情况是什么，我的建议会解决它。

CSS sprite定位在按钮内

1 个答案: