CSS Sprite精灵技术

技术背景：

将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。加速的关键，不是降低质量，而是减少个数。

 

CSS Sprite的技术原理？

CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

 

这里详细讲解下背景图片定位：

background-position 属性设置背景图像的起始位置。

语法： 

background-position : length || length 

background-position : position || position 

取值： 

length：百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位  

position ：top | center | bottom | left | center | right 

 

默认值：0% 0%。

 

top left/top center/top right

center left/center center/center right

bottom left/bottom center/bottom right

如果仅规定了一个关键词，那么第二个值将是"center"。

注意：即可以先上中下，也可以先左中右，如：top right/right top

 

x% y%

第一个值是水平位置，第二个值是垂直位置。

左上角是0% 0%。右下角是100% 100%。

如果您仅规定了一个值，另一个值将是50%。

 

x y

第一个值是水平位置，第二个值是垂直位置。

左上角是0 0。单位是像素(0px 0px) 或任何其他的CSS 单位。

如果您仅规定了一个值，另一个值将是50%。

您可以混合使用x y% 或者x% y  也可混合使用legth position（right 100px）

left center right代表背景图片居左、居中、居右显示

top center bottom代表背景图片居上、居中、居下显示

 

说明： 

设置或检索对象的背景图像位置，必须先指定 background-image 属性。

该属性定位不受对象的补白属性( padding )设置影响。

默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补白( padding )的内容区域的左上角。

 

在使用中注意优化和图片的切割：

CSS Sprites图片中把颜色较近或相同的组合在一起可以降低颜色数，因为少色数的图片文件体积会相对的小。

CSS Sprites的图片不要有太多空隙。