加載圖像作爲背景與css精靈

爲了減輕頁面的負載，我正在考慮使用精靈。我的問題是我有一個圖像作爲背景li和它之間的另一個圖像。
我想加載所有圖像與精靈，但我可以使用一個類作爲背景li？如果我加載2或膿影圖像爲精靈，我將有一個包含我所有圖像和CSS的圖像，我可以選擇哪個顯示。例如：這一個：http://i.stack.imgur.com/THgwl.png我可以選擇這4個圖像中的哪一個顯示在我離開的片段上。
我可以用li來做同樣的事嗎？
加載圖像作爲背景與css精靈

<li class="icon advice chrome">content</li>

.icon { 
 
    background:url(http://i.stack.imgur.com/THgwl.png); 
 
} 
 
.advice { 
 
    height:100%; 
 
    width:100%; 
 
} 
 
.chrome { 
 
    background-position:-0px -0px; 
 
    width:70px; 
 
    height:70px; 
 
    background-repeat:no-repeat; 
 
} 
 
.firefox { 
 
    background-position:-0px -80px; 
 
    width:70px; 
 
    height:70px; 
 
    background-repeat:no-repeat; 
 
} 
 
.facebook { 
 
    background-position:-0px -160px; 
 
    width:70px; 
 
    height:70px; 
 
    background-repeat:no-repeat; 
 
} 
 
.twitter { 
 
    background-position:-0px -240px; 
 
    width:70px; 
 
    height:70px; 
 
    background-repeat:no-repeat; 
 
}

<a href="http://www.google.com/chrome" target="_blank"><img src="http://i.stack.imgur.com/HKyLm.gif" border="0" width="1" height="1" class="icon advice chrome" title="Google Chrome" alt="Chrome" /></a> 
 
\t <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank"><img src="http://i.stack.imgur.com/HKyLm.gif" border="0" width="1" height="1" class="icon advice firefox" title="Firefox" alt="Firefox" /></a><br /> 
 
\t <a href="https://www.facebook.com/" target="_blank"><img src="http://i.stack.imgur.com/HKyLm.gif" border="0" width="1" height="1" class="icon advice facebook" title="" alt="Facebook"/></a> 
 
\t <a href="https://twitter.com/" target="_blank"><img src="http://i.stack.imgur.com/HKyLm.gif" width="1" height="1" border="0" class="icon advice twitter" title="" alt="Twitter"/></a>

來源

2014-10-02 Shika93

你試過運行它嗎？看起來像它對我工作.. – Jmh2013 2014-10-02 17:27:43

是的，你可以使用一個類來調用的背景圖像，但您需要定義後臺位置的其他類，例如看到我的小提琴

JS Fiddle

我已使用.sprite類回電地面圖像爲<li>和<a>也，但我已經添加了另一個類background position

來源

2014-10-02 18:14:54

確實沒有'背景位置'崩潰的一切。謝謝！ – Shika93 2014-10-02 19:33:52

加載圖像作爲背景與css精靈

回答

相關問題