将所需要的网页图形放到一张上，通过进行部分遮盖，留出所需图形，这样可减少请求时间，效率更高。
原图如下：
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>多图形</title>
<style>
.tp1{
background-image: url("shopping_bg.png");
float:left;
width:114px;
height:100px;
background-repeat: no-repeat;
}
.tp2{
background:url("shopping_bg.png");
float:left;
background-position: 10px -100px;
width: 114px;
height: 35px;
background-repeat: no-repeat;
}
.tp3{
background:url("shopping_bg.png");
float:left;
background-position: 10px -145px;
width: 114px;
height: 27px;
background-repeat: no-repeat;
}
.tp4 {
background: url("shopping_bg.png");
float: left;
background-position: 20px -178px;
width: 114px;
height: 33px;
background-repeat: no-repeat;
}
.tp5 {
background: url("shopping_bg.png");
float: left;
background-position: 10px -223px;
width: 114px;
height: 33px;
background-repeat: no-repeat;
}
.tp6 {
background: url("shopping_bg.png");
float: left;
background-position: 10px -271px;
width: 114px;
height: 33px;
background-repeat: no-repeat;
}
.tp7 {
background: url("shopping_bg.png");
float: left;
background-position: 10px -321px;
width:114px;
height: 33px;
background-repeat: no-repeat;
}
.tp8 {
background: url("shopping_bg.png");
float: left;
background-position: 10px -376px;
width:114px;
height: 20px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="tp1">
</div>
<div class="tp2">
</div>
<div class="tp3">
</div>
<div class="tp4">
</div>
<div class="tp5">
</div>
<div class="tp6">
</div>
<div class="tp7">
</div>
<div class="tp8">
</div>
</body>
</html>
运行代码后如下：
这样做的结果可让每个图都置顶表现，所有上半部分被顶遮住，若想将图移到其他位置，可利用div进行设置。