H5-33 CSS Sprite

CSS Sprite 也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去

1、优点：

　　①减少图片字节

　　②减少网页的http请求，从而大大的提高页面的性能

2、原理：

　　①通过background-image引入背景图片

　　②通过background-position把背景图片移动到自己需要的位置

3、实列：

    <span class="a1"></span>

    <span class="a2"></span>

　　

        .a1{

            display: block;

            width: 45px;

            height: 70px;

            background-image: url(./1.jpg);

            border: 1px solid red;

            background-position:-92px -14px;

        }

        .a2{

            display: block;

            width: 45px;

            height: 70px;

            background-image: url(./1.jpg);

            border: 1px solid red;

            background-position:-257px -14px;

        }