显示第一组图片，网页代码如下：
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>
图片精灵</title>
<style>
ul,li{margin:0;padding:0;list-style:none;}
a{display:block;width:104px;height:109px;background:url(button.png) no-repeat -10px -5px;margin-bottom:10px;}
a:hover{background-position:-10px -115px;}
</style></head>
<body>
<ul>
<li><a href="#"></a></li>
<li><a href="#" class="icon2"></a></li>
<li><a href="#" class="icon3"></a></li>
</ul>
</body>
</html>
显示第二、三组图片，网页代码如下：
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>
图片精灵</title>
<style>
ul,li{margin:0;padding:0;list-style:none;}
a{display:block;width:104px;height:109px;background:url(button.png) no-repeat -10px -5px;margin-bottom:10px;}
a:hover{background-position:-10px -115px;}
a.icon2{background-position:-124px -5px;}
a.icon2:hover{background-position:-124px -115px;}
a.icon3{background-position:-235px -5px;}
a.icon3:hover{background-position:-235px -115px;}
</style></head><body>
<ul>
<li><a href="#"></a></li>
<li><a href="#" class="icon2"></a></li>
<li><a href="#" class="icon3"></a></li>
</ul></body></html>
以此类推可以调用后面其它组的图片。最终实现的效果：
[attach]704[/attach]