加载图像作为背景与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>
你试过运行它吗?看起来像它对我工作.. – Jmh2013 2014-10-02 17:27:43