Php CSS精灵-如何隐藏图像的平衡部分

嗨，我正在使用图像精灵来显示各种图标

XHTML

<div class="ListIcons">
    <ul>
    <li class="Icon i-scissors">A list item using the <strong>i-scissors</strong> class.</li>
    </ul>
</div>

问题

我的问题

如何隐藏与我想要的图像一起显示的其他两个图像

请帮忙

精灵

我使用的精灵图像如下：

---

必须为图标创建另一个节点，如下所示

 <ul>
<li class="some_class"><span class="Icon i-scissors"></span>A list item using the <strong>i-scissors</strong> class.</li>
</ul>

使用i剪刀类的列表项

---

如果你看看你的css，里面有

witdh

和

height

是

32px

，但是你的刺里面很长，

所以把它分成两部分

我对代码做了一些修改

HTML

<div class="ListIcons">
    <ul>
    <li class="i-scissors">A list item using the <strong>i-scissors</strong> class.</li>
    </ul>
</div>

输出看起来像

---

您可以根据需要对css进行更改。

或者，：before伪元素在这里可能很有用，可以保持源代码的整洁。（不适用于IE高达7的IIRC）

<div class="ListIcons">
    <ul>
    <li class="i-scissors">A list item using the <strong>i-scissors</strong> class.</li>
    </ul>
</div>

li.i-scissors {

    list-style: none outside none;
}
li.i-scissors:before {
    background: url(../images/icons/icons.png) no-repeat scroll 0 -52px transparent;
    content: " ";
    display: block;
    position: absolute;
    width: 23px;
    height: 32px;
    top: 11px;
    left: 19px;
}