精灵图用法

精灵图：

简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图（雪碧图）。

例如：

 精灵图的使用：

要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

background-image属性;

设置背景图片通过url等添加路径，例如：

background-image: url(./img/lujing.png);

background-repeat属性：

设置背景图片对所在元素中是否重复，默认是重复显示，填充背景。如果图片小于元素，则重复显示。可以使用no-repeat值让其不重复。例如：

background-repeat: no-repeat;

background-position属性：

设置背景图片精确定位。例如：

.bg-tp1 {
    width: 20px; height: 20px;
    /* 设置元素宽高 */
    background-image: url('css_sprites.png')
    /* 插入背景图片 */
    background-position:-10px -10px;
    /* 设置背景图显示位置 */
}


.bg-tp2 {
    width: 20px; height: 20px;
    background: url('css_sprites.png') -50px -10px;
    /* 简写 */
}

即可精确定位到大图中小图标所在位置。