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

问题描述：

Hi I am using an Image Sprite to display various Icons.

XHTML

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

The CSS

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

The issue

enter image description here

My Question

How can I hide the other two images which are being displayed along with the one I want.

Kindly Help !

The Sprite

The Sprite Image which I am using is this:

enter image description here

答

I have modified the code a little

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

Output would look like

list sprite

You can make changes to the css as per your requirement.

答

You must make another node for your icon, something like this

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

If you look your css there is witdh and height are 32px but your sting is long inside, <li> so divide it inti two part

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

相关推荐