CSS精灵技术

一、CSS精灵

需求：

 

当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图（雪碧图），如下图所示。

 

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

 

 

 

 

 

 

二、制作精灵图

大部分情况下，精灵图是由美工使用 PS 来制作的。需要注意的是：

• 精灵图上放的都是小的装饰性的背景图片，不能出现插入图片；
• 精灵图的宽度取决于最宽的那个背景；
• 摆列方式可以是横向的，也可以是纵向的，但每个图片之间需间隔开偶数像素的空间；
• 背景图很少的情况下，没必要用精灵图，维护成本太高；如果背景图片太多，建议使用。

 

三、

 

background-position:500px 15px；
背景图片从容器(container)左上角的地方向右移500px,向下移15px，超出的部分隐藏。

background-position:-500px -15px;
背景图片从容器(container)左上角的地方向左移500px，向上移15px，超出的部分隐藏。

 

 

 

精灵图虽然实现了缓解服务器压力以及用户体验等问题，但还是有一个很大的不足，那就是牵一发而动全身。这些图片的背景都是详细测量而得出来的，如果需要改动页面，将会是很麻烦的一项工作 ...