加载图像作为背景与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精灵

回答

相关问题