前端必備 CSS Sprites雪碧圖如何使用

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;
}

效果：

---

經典前端面試題每日更新，歡迎參與討論，地址：https://github.com/daily-interview/fe-interview。

---

更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技術文章、視頻教程和開源項目，請關注微信公衆號——全棧弄潮兒。