将多张图整合到一张大图中，再用css定位技术

  之前作网站的时候，常常有地方要用小图标。第一次接触bootstrap的时候，下载打开它的源文件的时候只看到了两张图，就是包含不少小图标的大图。总所周知，bootstrap用到图标的地方不少，可是我一直不知道他们是怎么作到的。今天再写一个JavaScript demo的时候，又遇到了这个问题。因此就趁此机会研究了一下：
      这是一种关于css sprites的技术，就是将多张图放在一张大图中，而后经过css的background-position属性来实现的。采用这种方法，有以下：
      （1）经过整合图片，从而减小服务器的请求次数，加快加载速度。
      要实现这个效果，还得研究一下background-position。
      background-position说明：
      该样式是指设置背景图片的位置：而且必须制定background-image属性，该属性定位不受对象的补丁属性( padding )设置影响。
      可能的值：
      （1）
        top left
        top center
        top right
        center left
        center center
        center right
        bottom left
        bottom center
        bottom right
        当只给定一个值时，则第二个值默认为center
       （2) x% y%
       第一个指的是水平值，第二个指的是垂直方向上的值，左上角是 0% 0%。右下角是 100% 100%。若是仅规定了一个值，另外一个值将是 50%。
       （3）x ,y
       第一个值指的是水平方向上的具体偏移值，第二个值指的是垂直方向上的具体偏移值
       左上角是 0 0。单位是像素 (0px 0px) 或任何其余的 CSS 单位。若是您仅规定了一个值，另外一个值将是50%。您能够混合使用 % 和 position 值。

       介绍完这一个关键的技术以后，要想实现最后的效果，还得须要你给所要设置的元素加一个高宽的限制，这样在无形中就至关于对整张背景图片进行裁剪。而且结合overflow：hidden属性。

       实例：

在一个提交按钮中假如搜索背景图：

              <input type="submit" class="submit" value=""/>

css样式：

.submit{background:#ffb900 url(hpc14.png) no-repeat; width:37px;height: 37px;border: 5px solid #ffb900;background-position: -224px -52p;overfkow:hidden;}