关于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的缺点有：
一、开发繁琐。
二、后期维护麻烦。（体验过的都知道）