这个是老掉牙的技术了，最近看到博客有很多凌散的小图片，于是就把它们用csss prites合在一起了。下面这篇文章只是介绍一下相关的优势和用法。相关的技术文都已经是几年前的了，所以干脆就找一篇比较好理解的文章转回来算了。
关于CSS sprite技术的详解，小弟在这里就不赘述了，因为伟大的英特网上有一篇伟大的技术文档介绍。请移步http://css-tricks.com/css-sprites/
在CSS sprite中最重要的就是关于background这个属性的理解，所以本文比较详细的介绍了background这个属性，如有错误，劳请指教。
background的集合有：'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', 和 'background'。
在介绍background特性之前首先要明确background的作用范围，background是在padding box之内有效，所以背景色和背景图片都在此范围内。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" rel="stylesheet">
</style>
</head>
<body>
<div id="div1" style="background-color:grey; padding:50px; width:150px; height:150px; border:2px solid green; margin:50px;">
Test background scope
</div>
<div id="div2" style="background-image:url(test.gif); padding:50px; width:150px; height:150px; border:2px solid green; margin:50px;">
Test background scope
</div>
</div>
</body>
</html>
background的核心属性
background-position
| Value: | [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit |
| Initial: | 0% 0% |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | refer to the size of the box itself |
| Media: | visual |
| Computed value: | for <length> the absolute value, otherwise a percentage |
（1）百分数
将background-position设置为百分数，可以将其归结为跟踪原则。background-position：x% y%,是指以图片左上角为原点的A（图片长度的x%，图片高度的y%）点和以paddingbox的左上角为原点的B（paddingbox长度的x%，paddingbox高度的y%）点,相合重合。
（2）数值
将background-position设置为数值，可以将其归结为挂靠原则。background-position：
Xpx
Ypx,是指图片的左上角挂靠的以paddingbox的左上角为原点的倒直角坐标系，B（
Xpx，
Ypx）点。例如：background-position:50px 50px，是指将图片的左上角挂靠在以paddingbox的左上角为原点的倒直角坐标系，B（
50px，
50px）点.background-position:-50px -50px,是指将图片的左上角挂靠在以paddingbox的左上角为原点的倒直角坐标系，B（-
50px， -
50px）点.
综合实例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" rel="stylesheet">
#div3{
background-image:url(test.gif);
padding:50px;
width:100px;
height:100px;
border:2px solid green;
margin:50px;
background-position:20% 20%;
}
#div4{
background-image:url(test.gif);
padding:50px;
width:150px;
height:150px;
border:2px solid green;
margin:50px;
background-position:50px 50px;
background-repeat:no-repeat;
}
#div5{
background-image:url(test.gif);
padding:50px;
width:150px;
height:150px;
border:2px solid green;
margin:50px;
background-position:-50px -50px;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="div1" style="background-color:grey; padding:50px; width:150px; height:150px; border:2px solid green; margin:50px;">
Test background scope
</div>
<div id="div2" style="background-image:url(test.gif); padding:50px; width:150px; height:150px; border:2px solid green; margin:50px;">
Test background scope
</div>
<div id="div3">
Test background scope
</div>
<div id="div4">
Test background scope
</div>
<div id="div5">
Test background scope
</div>
</div>
</body>
</html>
本文转自：《Shawn》 http://www.cnblogs.com/sc-xx/archive/2012/03/29/2423663.html
5 comments
额，看一下
@iEdon 坐标定位的时候比较麻烦 13:)
这个东西用过，
感觉有点麻烦的说.
@懒人梦醒 css sprites其实就是将网站的多个小图标素材合并成一张大的图片，然后用css按照xy轴定位到具体的位置。这样的好处就是减少图片素材的加载次数。
纯技术不感兴趣啊。。。