CSS Sprites又稱css精靈或者諧音css雪碧，是一種網頁圖片應用處理方式，復雜的事情簡單化，提高開發效率。

CSS Sprites將一個頁面內所需要顯示的圖片全部整合到一張大圖中，并使用css屬性background進行調用。這樣的話，當頁面渲染時，可以減少請求次數，在一定程度上能夠加快網頁加載速度。

這并不是什么新鮮玩意了，但由于將小圖整合到一張大圖，又要準確的寫出所需小圖的background-position值，對于很多新手來說比較浪費時間，很多人只能放棄這個比較繁瑣的步驟。

background-position 屬性改變圖像在背景中的位置：

基本用法

background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;  // right 為正數 圖片向右移 為負數 圖片向左移  top同理

eg:

原始圖片：

.pause{
    width: 36px;
    height: 36px;
    background: url("https://upload-images.jianshu.io/upload_images/3100736-be3c0495c116dd76.png") no-repeat;
}
.stop{
    width: 36px;
    height: 36px;
    background: url("https://upload-images.jianshu.io/upload_images/3100736-be3c0495c116dd76.png") -36px 0px no-repeat;
}
.play{
    width:36px;
    height: 36px;
    background: url("https://upload-images.jianshu.io/upload_images/3100736-be3c0495c116dd76.png") -75px 0 no-repeat;
}

效果：