背景图合并

　　这一周的学习仍然是以切图为主。完成了100度单页的制作和中古项目的大部分页面。在这一漫长而又细腻的过程中感受是良多的，当然也有很多值得分享的经验。　　

　　对前段设计师来说，切图是必不可少的步骤。网页中除了文字内容，大部分诸如图片，图标的部分都需要使用PS从各种图片中切下。指定出一种合适的格式，然后用代码调用图片。WEB上能使用的图片只有gif,png,jpg(jpeg)这三种格式的图片。他们各自也有着不同的使用用途。　

　　一般来说，gif格式用于比较小的图片，诸如，页面中用到的大部分图标。如有小型动画也可使用gif格式；png格式则用于稍大的图片，它可以很好的保证图片的清晰度；jpg则适用于更大的图片。

　　出于提高网页访问速度和搜索引擎优化的目的，可将页面中不会变动的图片及图标等整合到一张大图中。这样可有有效减少网站对服务器图片的请求次数。在切图时这也十分的方便，无需在为每一个图标新建一个文档。这里也得说一个属性，即background-poistion属性。由于这个属性的特殊性，我们在切图及调用图片时也得注意一些细节问题。

　　如：background-poistion: -50px -100px; 或者：background:url(../images/big.png) -50px -100px no-repeat;

　　这条代码的意思是，调用big.png这张图片作为背景图。在这张大图中定位在50px,100px这个位置。再由标签的大小来确定在页面中需要显示的背景图范围。

　　问题会出现，这种方式我们无法从代码中确定背景图片在标签中的显示位置。如果所调用的图片只需在标签的左边或右边显示，那么这种合并背景图的办法将无能为力。当出现这种情况时，我们只能将需要在标签中定位背景图的图片单独放置在合适宽度的文档中。然后，还是使用相同的命令：background-position:left/right/center top/bottom；来实现。

　　此外，其它的注意情况还有：对只需引用背景图片的标签，往往需要在其中输入 空格符；引用背景图的标签一定注意其宽、高设置，或者还需更改其行块属性；在拼合背景图时注意其摆放位置，一定方便计算、测量其所在位置，当然应该本着以节约空间为主。