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 - 如何隱藏圖像的平衡部分

回答

相關問題