CSS Sprites - 如何隐藏图像的平衡部分

Question

您好我正在使用Image Sprite来显示各种图标。

XHTML

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

CSS

.Icon {background:url(../images/icons/icons.png) no-repeat top left;}
.i-scissors{ background-position: 0 -52px; width: 32px; height: 32px; }

问题

我的问题

如何隐藏正在显示的其他两个图像以及我想要的图像。

请帮助！

精灵

我正在使用的Sprite Image是：

Answer 1

我已经修改了一些代码

<强> HTML

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

<强> CSS

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

输出看起来像

您可以根据自己的要求对css进行更改。

Answer 2

您必须为您的图标创建另一个节点，例如

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

如果你看到你的css，witdh和height是32px，但你内心很长，<li>所以将它分成两部分