CSS Sprites 网页背景图片定位技术简述

很多时候我们打开一些网站的背景图片会发现是很多图标集合的一张完整的图片。这种网页使用的就是CSS Sprite，通过将多个图标整合在同一张图片，可以减少向服务器请求图片的次数，加快网页的加载速度。

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

加速的关键，不是降低质量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

背景图片定位方法：

我们知道，CSS中写背景的代码形式为：

1. .class{ background:url(./images/bg.png) no-repeat left top #ccc;}

如果使用CSS Sprite方式对背景图片进行定位，那么需要修改的就是上述代码中的 left 和 top 两处。事实上，left 和 top两个单词所对应的均是0px，也就是说上述代码也可以写成：

1. .class{ background:url(./images/bg.png) no-repeat 0px 0px #ccc;}

其实现的效果是背景图片坐上对其。下面，Kurly根据自己的经验和理解，给大家绘制一张坐标图，如下。CSS的背景图片是以左上角为原点的，这样我们就可以理解前面代码是左上角对齐的效果了。同时，请注意观察图示坐标轴的正方向，明白了这一点就好办了。图中Kurly标出了(-50px, -50px)的坐标位置，如果我们要将白色图片中的边长为50px的灰色正方形作为一个长宽分别为50px的DIV的背景图片，那么我们只需要这样来编写CSS：

1. .box{
2. height:50px;
3. width:50px;
4. background:url(./images/bg.png) no-repeat -50px -50px;
5. }

另外，如果我们的DIV层为边长200像素的正方形，我们想让这个灰色正方形作为背景且居中，那CSS又该怎么写呢？很简单，只要理解了坐标轴的方向，根据上例，我们很容易就知道坐标值应该修改为正的50px即可（注意：黑色区域为背景图片以外的区域）。CSS如下

1. .box{
2. height:200px;
3. width:200px;
4. background:url(./images/bg.png) no-repeat 50px 50px;
5. }

相信，读完上面的示例，你已经明白如何通过CSS Sprite方式定位你的背景图片了吧！