css與精靈的背景大小

Question

我有一個列表，並且每個<li>都有一個圖標和一個文本。

圖標的圖像是精靈圖像，所以我需要設置li的background-size具有圖標的大小。

我怎樣才能做到這一點與CSS？

Answer 1

您可以在CSS3的背景圖像的大小一樣background-size: 32px 32px;但這並不是真正的跨瀏覽器兼容的，我想那就是你的問題是什麼。

除非精靈的間距和垂直距離很好，否則我的建議是使用一些額外的標記。例如，使用標記等

<li><span class="ico"></span>This is an li element.</li> 

和風格span元件具有適當高度和背景圖像精靈。使用此方法，您的li元素可以具有任何高度，並且只有適當的圖標纔會顯示，儘管您的精靈的密集程度如何。

Answer 2

您需要設置高度。 LI的背景重複以及填充。

這裏是一個方便的教程：preview.moveable.com/JM/ilovelists

Answer 3

這裏是一個例子。交換將你的精靈放在淺灰色區域：http://jsfiddle.net/Pf7Xs/

這是你在問什麼？有一個精靈區域和相同大小的<li>內的文本？

你大多會使用line-height和height排列你想要的。 希望有所幫助。

Answer 4

對於支持文本的圖像 - 如帶有圖標的列表 - 最好使用CSS僞元素：before或：after。這可以保持您的HTML清潔。

<ul> 
    <li>List Item</li> 
    <li>List Item</li> 
</ul> 

li:before 
{ 
    content: ""; 
    width: 1em; 
    height: 1em; 
    background: url("image.png") -12px -12px no-repeat transparent; 
    display: inline-block; 
} 

有關該技術的更多詳細信息，請查看http://css-tricks.com/。