本帖最后由 李静老师 于 2018-2-26 17:43 编辑
有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。 使用图像拼合会降低服务器的请求数量，并节省带宽。 下图为背景图片素材：
显示第一组图片，网页代码如下：
<!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> 以此类推可以调用后面其它组的图片。最终实现的效果：
大家可以动手试一下效果。
| 
发表于 2018-2-26 17:41:51
收藏