前端开发 / 什么是雪碧图?

什么是雪碧图?

相信搞前端的大多数都听过雪碧图这么一个神奇的名字,有些人知道它是做什么的,但是有些人不知道它为什么叫雪碧图,今天我就带领大家来重新认识一下雪碧图:

(鼠标点击可以互动)

1. 什么是雪碧图

雪碧图乍一听可能不知所然,因为雪碧是一种汽水,和图片又有什么关系呢?那我们就来讲一讲它到底是个什么?它其实就是把很多小图片集合在一起放到了一张大图片里面,就像下面这样:
雪碧图

可以看到通常都是一些图标类的图片,这是因为图标一般比较符合“小”图片的定义:
图片描述
然后用到哪个图的时候就用背景图定位来定位到具体的位置:
图片描述
当然了,黑框只是个示意,实际上既不会让用户看见黑框,也不会让用户看到其他的图片,就像这样:
图片描述

2. 小结

综上所述,雪碧图其实就是将一些小图片集合起来放在一张大图片上。
这个概念其实很简单,并不像其他那些专业名词那么难理解。

但令人费解的并不是雪碧图到底是什么,而是雪碧图和雪碧之间到底有什么说不清道不明的联系?

为啥不叫可乐图或者啤酒图呢?难不成发明这玩意的人爱喝雪碧?
欲知后事如何,且看下一小节。