精灵图-CSS sprites

CSS sprites是一种性能优化技术，将多个图像组合成单个图像文件，可以提高性能，减少服务器加载数量。

相当于是对个图像缝合在一起。

 

先设置一个空的块级元素，代码如下：

 接下来在css中插入需要用到的组合图片,利用width和height设置一个图片所需要的宽和高，用background-position把小图片定位。再用background-repeat不让背景图象平铺,代码如下：