Question

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

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

＆＃13;

.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;
}

＆＃13;

<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>
	<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 />
	<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>
	<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>

＆＃13;

Answer 1

是的，您可以使用单个类来调用背景图像，但您需要为其他类定义背景位置，例如，请参阅我的小提琴

JS Fiddle

我已使用.sprite课程调用<li>和<a>的背景图片，但我已为background position添加了另一个课程

加载图象作为与css sprites的背景

1 个答案: