css 雪碧图sprite的使用

我们知道，像淘宝这类电商网站，产品的出售会有一些分类，每个分类都会用一个小的缩略图表示，如下图所示

如上图所示用黄色荧光笔画出的（原谅我电脑没装fireworks，大家凑合看），这些图一般都会用专门工具ps或者css sprite贴图工具放在一个图片里。我们在ul的li标签前面添加任意标签，本处用<i>，设置宽高，将制作好的图片当作<i>标签的背景，通过改变background-position属性，移动图片，得到所对应的标签，即可得到所要的各类缩略图。

sprite图片用在不常经过数据库的文件，不需要用户上传的地方，这样用一个大图改变位置得到的sprite图标可以大大减少浏览器于服务器的交互。