css精灵图

一、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.代码实现：

使用到的精灵图（sprite）素材：incn.png

img{
    background-image: url(icno.png);//引用精灵图（sprite）：incn.png
    background-size: 60px 40px;     //设置精灵图大小
    background-position: 0 0;       //设置精灵图位置
}

使用到的核心代码：

background-image: url(icno.png);---为sprites里的span元素设置背景图像，引用了精灵图（incn.png）；

background-size: 60px 40px; ---为背景图像调整尺寸大小，使得sprites盒子的span元素的背景图像固定为宽（60px）,高（40px）；

background-position 属性---这是最关键的代码，图片定位。设置或检索sprites盒子的span元素的背景图像位置。必须先指定 background-image 属性才可使用。