用css精灵加载图像作为背景

Question

为了减轻页面负载，我考虑使用精灵。我的问题是，我有一个图像作为li的背景，它之间有另一个图像。
我想用精灵加载所有的图像，但我可以用一个类作为li的背景吗？如果我加载2或pus图像作为精灵，我会有一个包含我所有图像的单个图像，使用css我可以选择显示哪个。例如：这个：https://i.stack.imgur.com/THgwl.png我可以选择这4个图像中的哪一个像我留下的片段一样显示
我可以用li做同样的事情吗

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

.icon {
    background:url(https://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="https://i.stack.imgur.com/HKyLm.gif" border="0" width="1" height="1" class="icon advice chrome" title="Google Chrome" alt="Chrome" /></a>
	<a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank"><img src="https://i.stack.imgur.com/HKyLm.gif" border="0" width="1" height="1" class="icon advice firefox" title="Firefox" alt="Firefox" /></a><br />
	<a href="https://www.facebook.com/" target="_blank"><img src="https://i.stack.imgur.com/HKyLm.gif" border="0" width="1" height="1" class="icon advice facebook" title="" alt="Facebook"/></a>
	<a href="https://twitter.com/" target="_blank"><img src="https://i.stack.imgur.com/HKyLm.gif" width="1" height="1" border="0" class="icon advice twitter" title="" alt="Twitter"/></a>

Answer 1

是的，你可以使用一个类来调用背景图像，但你需要为其他类定义背景位置，例如参见我的fiddle

JS Fiddle

我也使用.sprite类来调用<li>和<a>的背景图像，但我为background position 添加了另一个类