什么是Css Sprite？

相信搞前端的大多數都聽過Css Sprite這么一個神奇的名字，有些人知道它是做什么的，但是有些人不知道它為什么叫Css Sprite，今天我就帶領大家來重新認識一下Css Sprite：

1. 什么是Css Sprite

Css Sprite乍一聽可能不知所然，因為雪碧是一種汽水，和圖片又有什么關系呢？那我們就來講一講它到底是個什么？它其實就是把很多小圖片集合在一起放到了一張大圖片里面，就像下面這樣：

可以看到通常都是一些圖標類的圖片，這是因為圖標一般比較符合“小”圖片的定義：

然后用到哪個圖的時候就用背景圖定位來定位到具體的位置：

當然了，黑框只是個示意，實際上既不會讓用戶看見黑框，也不會讓用戶看到其他的圖片，就像這樣：

2. 小結

綜上所述，Css Sprite其實就是將一些小圖片集合起來放在一張大圖片上。
這個概念其實很簡單，并不像其他那些專業名詞那么難理解。

但令人費解的并不是Css Sprite到底是什么，而是Css Sprite和雪碧之間到底有什么說不清道不明的聯系？

為啥不叫可樂圖或者啤酒圖呢？難不成發明這玩意的人愛喝雪碧？
欲知后事如何，且看下一小節。