嗨,我正在使用图像精灵来显示各种图标。
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; }
问题
我的问题
我如何才能隐藏其他两个图像,这是显示与一个我想要的。
请帮忙!
精灵
我使用的精灵图像是:
最佳答案
我对代码做了一些修改
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进行更改。