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

嗨，我正在使用图像精灵显示各种图标。CSS Sprites - 如何隐藏图像的平衡部分

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

问题

enter image description here

我的问题

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

请帮助！

精灵

精灵形象，我现在用的就是这样的：

enter image description here

来源

2012-03-19 Vikram Rao

我已经修改了代码一点

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

输出会是什么样子部分

list sprite

您可以根据您的要求更改CSS。

来源

2012-03-19 08:56:55

你必须作出这样

<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但你的刺是很长的insi德，<li>所以把它INTI 2

来源

2012-03-19 08:12:44 safarov

或者，'：before'伪元素在这里可能会很有用，并会保持源代码更清晰。（IE不可用于7，IIRC） – 2012-03-19 08:14:40

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

回答

相关问题