【CSS sprites （CSS图片精灵） 详解】

本文包含 CSS sprites 简介、原理、适用在哪些类型的网页制作中、背景图片的 position 值如何确定以及制作 sprites 的技巧。

【CSS sprites 简介】

CSS Sprites 在国内很多人叫 css 精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

【CSS sprites 原理】

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

【CSS sprites 适用在哪些类型的网页制作中】

例如制作一个网页播放器，需要很多的按钮，按钮又有很多的不同的状态，例如按钮在鼠标移上去的时候颜色是橙色，在鼠标点下去的时候颜色是红色，在鼠标松开的时候颜色是灰色。这个时候我们需要使用到很多小的图片，我们可以合理的把这些小图片布局整合在一张图片中。这样可以减少在图片命名过程中遇到的命名问题、空间占用问题等。

【CSS sprites 使用案例】

例一 ：下面讲解一个小的案例来说明 CSS sprites 的使用方法。我们实现下面这个案例的样式，将带有“分享中”字样的图片作为背景图片布局在 Box 里，假设 Box 大小为：width:291px  height: 157px  

 

背景图片如下：

 

width: 57px  height: 20px

样式表中有关背景样式的写法应写为：

background-image: url(  );  /*背景图片地址*/
background-repeat: no-repeat;
background-position: 234px 0px;

 

【CSS sprites 背景图片的 position 值如何确定】

如图黑色边框内的两个方框，边长均为 200px 。在 CSS sprites 中 ① 左上角坐标为 （0，0），② 的左上角坐标为 （-200，-200）。我们在 CSS sprites 中使用坐标值时都是使用左上角的坐标。

【制作 sprites 的技巧】

例如我们例一中的“分享中”的图片，它是位于整个 Box 的右边，那么我们在制作精灵图片的时候要把它放置的精灵图片的左边，这样可以有效的节省精灵图片布局空间。当然，当把它放置在左上角的时候，相应的 X 、Y值便是正值。