将很多小图片合成一张大图,其实在加载图片的时候,如果有9张图片,就要向服务器请求9次。如果想图片整合到一张图上,那么就只用加载一次即可
制作方法:
在ps中新建文件,设置宽度和高度【不宜过大,一般保持整合后的图片在200k以内,后期可以通过修改画布大小,修改画布】,一般是将小图片整合到一张图上
将.psd文件中的图片长按鼠标左键,将图片拖过来保存即可
整合好的图片必须是背景透明的,图片是png或gif
注意修改画布大小:【图像——画布大小——修改即可】其中,有一个选项为定位,意思是将修改的画布大小从那个方向修改,一般是向下和向左,因为这样不需要修改其他已经放好的图片
整合图片的好用工具:
软件:CSS Satyr
使用方法可见:http://t.csdn.cn/YHe1S
将需要整合的图片在软件中摆放好,点击生成——得到两个文件
一个文件是整合好的文件是png格式,背景透明
另一个文件是一个html文件,该文件标注这每一个图片的位置

图片整合的优点:
减少请求服务器的次数
整合后的图片大小要小于所有图片的总大小
增加页面的加载速度
使用方法:使用背景图位置属性 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)位置的图片,因此图片的位置需要向上移动

图片整合的缺点:
比使用单张图片要麻烦
在合并图片的时候,上下左右要留有足够的空间,保证在显示某个图片的时候,其他图片不能显示
适应性差,高分辨率下,如果平铺的图片可能会断裂
定位比较繁琐
可维护性差