將多張圖整合到一張大圖中，再用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;}