關於Sprites的一些理解

今天作測試，遇到一道選擇題。

瞬間一臉懵逼，sprites是什麼？
經過對各選項的分析，大體明白了幾點：一、它是css屬性。二、它與圖片有關。三、它是背景圖片。
而後就選了一個大概不靠譜的，成功的選錯了。

經過查找資料得知，CSS Sprites 也叫雪碧（Sprite）圖，將網頁中的多個小圖標，集合到一整張圖中。
通常命名爲「icon.png」，好比下圖所示。

使用時，給元素背景插入這張圖片，而後經過 background-position 來控制就行了。

background: url(icon.png) no-repeat;

.ul i-1{background-position: 0px 0px;}
.ul i-2{background-position: -30px 0px;}
.ul i-3{background-position: -30px -30px;}
.ul i-4{background-position: 0px -30px;}

這下就明白了，Sprites就是咱們日常用的icon圖片集合圖。

Sprites的優勢有：
一、減小網頁的http請求，大大提升網頁的性能。
二、將多張圖片拼成一張，可減小字節。提升網頁加載速度。
三、命名方便，一次命名屢次使用。

Sprites的缺點有：
一、開發繁瑣。
二、後期維護麻煩。（體驗過的都知道）