CSS如何使用sprite

在Jquery插件库中找到一个实例，代码简单易懂点击打开链接。

首先sprite.png长这样：

可以看到这是7张button的背景图片拼合成的，7张图片不重叠不相交，背景透明。

然后css就可以通过这些sprite的位置来分别取用这7张图。

ul li{    position: relative;width: 48px;height: 48px;background: red;margin-top:3px;        cursor: pointer;        overflow: hidden; }.li1{background: url(sprite.png) 0 0;}.li2{background: url(sprite.png) 0 -51px;}.li3{background: url(sprite.png) 0 -102px;}.li4{background: url(sprite.png) 0 -153px;}.li5{background: url(sprite.png) 0 -204px;}.li6{background: url(sprite.png) 0 -255px;}.li7{background: url(sprite.png) 0 -306px;}

这样，虽然这7个不同的图片是来自同一个png，我们却可以拥有7个以不同图像为背景的 li。

大大降低了http请求次数，加速网页的加载和响应速度。