如何制作精灵图

一、css 如何使用精灵图?

介绍如何使用精灵图使用前，我们要先知道什么是精灵图。只有先知道什么是精灵图，了解精灵图的原理了，我们才可是说使用精灵图。

1. 什么是css精灵图（sprite）？

css精灵图（sprite）直译为“CSS精灵”，也被称为通常被解释为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧图”，是一种网页图片应用处理方式。其实就是把一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

2.使用css精灵图（sprite）的方法

css精灵图（sprite）其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现图片的显示。

3.代码实现：

.basic{

    background-image:url(ui.png);

    width:80px;

    height:80px;

    background-repeat:no-repeat;

    display:inline-block;

}

sprite1{background-position:80px0px}

.sprite2{background-position:160px160px}