CSS Sprites（CSS 精灵）

      CSS Sprites在国内被很多人称为CSS精灵。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。因为，图片越多请求次数越多，造成延迟的可能性也就越大。
   CSS Sprites的原理是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
       CSS Sprites的实现原理与Photoshop的剪切蒙版相似。剪切蒙版是一个可以用其形状遮盖其他图稿的对象，因此使用剪切蒙版，您只能看到蒙版形状内的区域。假设我们要在一个设置好宽度与高度的div中显示一个小图标，但是小图标背景图是一张包含很多其他图标的大图。此时的div就相当于剪切蒙版的蒙版形状，而大图相当于被遮盖的图片，浏览器只能显示div区域内的背景图。那么，浏览器怎么知道div显示背景大图的哪个部分呢？由于在HTML中div的位置是确定的，我们可以以div的左上角为原点建立坐标轴，水平向右为x轴正轴，垂直向下为Y轴正轴，移动背景大图，是需要的区域显示在div中，此时背景大图左上角在坐标中的位置就是backgroud-position的值。注意，使用CSS Sprites一定要加background-repeat: no-repeat 。

div{
    width: width;
    height: height;
    background: url(image.png) no-repeat X Y;
}