CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
优点：
当用户往U盘中拷200张图片，会等很久。但是如果弄成一个文件，再拷贝就会快很多。
CSS Sprites 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。
实现方法：
1,首先将小图片整合到一张大的图片上
2,然后根据具体图标在大图上的位置，给背景定位。
3小图片排列方面：颜色相近的图片放在一起，可以减少输出的色数，进一步降低文件体积。
4.整合图片生成方面：PNG8的图像比GIF图像要小30%左右。
但是在整合图片的过程中也要注意：并不是所有的图片都是应该整合到这张巨图上的，比如一些广告、照片、大的栏目标题背景，这类图片不适合用作图片整合。CSS Sprites主要面向那些“更多”“登陆”“注册”之类的小图标，网站规模一般是比较大的。
CSS设置
<style type="text/css">
.box {
border:#eee solid 1px;
width:300px;
height:120px;
line-height:120px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
</style>
1.文本
<div class="box">Sample text</div>
Sample text
2.图片(IE下在图片后面加一 ......
position:relative在css设计中有着居住轻重的作用，如果你还没有用过它那么真是巨大的遗憾，以前做过div title提示框的时候有个箭头定位问题，当时的解决办法就是多套用一层div并且留白一定大小，用来背景显示箭头，但是发现箭头永远在下面，没有办法遮盖
主体融合的部分
，所以效果也就不好，当然，聪明的� ......
