原理：当网页需要多张背景的小图时，将多张背景图合并为一张大图，一次请求拉到本地，然后不同元素使用CSS的background-position进行定位。
优点：
减少请求次数，缩短页面加载时间
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style type="text/css">
div.icon {
width: 37px;
height: 42px;
border: 1px solid #000;
background: url(images/timg.jpg) no-repeat;
}
div.iconPhone {
· /*css精灵图通常位置设置为负值*/
background-position: -57px -9px;
}
div.iconEmail {
/*css精灵图通常位置设置为负值*/
background-position: -58px -50px;
}
</style>
</head>
<body>
<div class="icon iconPhone"></div>
<div class="icon iconEmail"></div>
</body>
</html>
缺点：
开发过程繁琐
维护过程繁琐
当组合的图片过大且排列不当时，会消耗过多的内存