css sprite，中文名称为 css精灵，是一种通过减少web应用上HTTP请求的优化方式。再次不谈原理内部怎么实现，就看简单的应用。
举个栗子，当你打开一个网站的时候，页面上会有各种小型的图标。以我前几天做的一个代码管理系统为例，这个系统上面有这些小图：
图片较小而且零碎。所以我就把它们用ps合并成了一张图（当时做的比较精细，现在就做个范例），如下：
制作这个合并图的时候，尽量减小图片的大小，例如长宽。
制作好之后，就要开始用在网页上。
原先没有合并之前，在页面中引入图片，使用img标签的src属性。如最上面的图，起码要5、6个img标签才能全部引用（本地代码）。像这样：
但是现在合并为一张图之后，img标签就不需要了，改成使用background-image:url();的形式。css如下
这个的重点在于：
1. 你要知道原先小图的尺寸。
2.在制作合并图的时候，小图在合并图的什么位置要知道，因为在background-position属性中要进行定位。（background-position的值可以是百分比，可以是px，也可以是”left center“这种形式。）有时候制作合并图需要非常精确的位置，所以这是个精细活。
补充：
上面的制作太粗糙了。有时候会把图做成一整行，或者一竖行，或者一个正方形。这样有什么区别呢？
横和竖的好处和坏处是一样的，可以写死 background-position x|y 的其中一个值为 0，只需度量高度或宽度一维，挪动position的方式不一样吧，直接切换看不出来，都一样，如果缓慢的话看交互有关。坏处是，图片的另一个维度的大小，以最大的那张图为准，有可能浪费很多空间。方形，可以尽可能减少空间浪费，但要度量两个坐标。背景图 sprite 动画宜做成一维规划，css3-animation 里的 step 函数可以很容易的设置，比如一行50张图的动画，设置 0 100% 后，step(50) 即可。它的意思是，在规定时间内分 50 步走完 0 ～ 100％ 的变化范围，每一步移动 1/50 的长度，恰好递进到下一张图，如此循环。
上文如有错漏，请指出并批评。`·
