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方式定位你的背景图片了吧！