1.主要目的是为了减少服务器的请求压力
2.主要属性用到的是background-position:
上课案例：
<!DOCTYPE html>
<html>
<head>
<title>背景合并</title>
<meta charset="utf-8">
<style type="text/css">
.top{
width: 100%;
height:100px;
}
.left{
float: left;
width: 64px;
height: 64px;
/*background-repeat: no-repeat;
background-position: -99px,-77px;*/
background:url(imgs/timg.jpeg) no-repeat -99px -11px;
}
.right{
float: right;
width: 64px;
height: 64px;
background-repeat: no-repeat;
background:url(imgs/timg.jpeg) no-repeat -264px -342px;
}
</style>
</head>
<body>
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
需要用案例图片的到这里下载
案例图片
效果图如下
图2
