CSS Satyr 图片整合

将很多小图片合成一张大图，其实在加载图片的时候，如果有9张图片，就要向服务器请求9次。如果想图片整合到一张图上，那么就只用加载一次即可

制作方法：

1. 在ps中新建文件，设置宽度和高度【不宜过大，一般保持整合后的图片在200k以内，后期可以通过修改画布大小，修改画布】，一般是将小图片整合到一张图上

2. 将.psd文件中的图片长按鼠标左键，将图片拖过来保存即可

3. 整合好的图片必须是背景透明的，图片是png或gif

注意修改画布大小：【图像——画布大小——修改即可】其中，有一个选项为定位，意思是将修改的画布大小从那个方向修改，一般是向下和向左，因为这样不需要修改其他已经放好的图片

整合图片的好用工具：

软件：CSS Satyr

使用方法可见：http://t.csdn.cn/YHe1S

1. 将需要整合的图片在软件中摆放好，点击生成——得到两个文件

2. 一个文件是整合好的文件是png格式，背景透明

3. 另一个文件是一个html文件，该文件标注这每一个图片的位置

图片整合的优点：

4. 减少请求服务器的次数

5. 整合后的图片大小要小于所有图片的总大小

6. 增加页面的加载速度

使用方法：使用背景图位置属性 background-position 实现背景图定位技术

<style>
.box{
    width:50px;
    height:50px;
    background:#ccc url(./1.png) no-repeat;//图片默认不平铺
}

.box.renp{
    background-position:-120px -50px;
}
</style>

<div class='box'></div>
<div class='box renp'></div>
<div class='box'></div>

注意：background-position:-120px -50px;为什么是负值？

因为背景图片显示的是（0,0）位置的图片，因此图片的位置需要向上移动

图片整合的缺点：

1. 比使用单张图片要麻烦

2. 在合并图片的时候，上下左右要留有足够的空间，保证在显示某个图片的时候，其他图片不能显示

3. 适应性差，高分辨率下，如果平铺的图片可能会断裂

4. 定位比较繁琐

5. 可维护性差