CSS Sprite技术被国内一些人称为CSS雪碧图，其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位访问图标。

我曾经用过的一张雪碧图：

拼合后

图标引用方式

CSS控制

很多网站喜欢运用雪碧图，访问量大的网站尤是如此。为什么呢? 分开管理不是更加灵活吗?大家都这么做当然有它的优点， 但同样存在缺点。

【优点】

（1） 1 + 1 < 2

图标放在一起, 可以令图标的总容量稍小一点. 这不是最重要的, 但我可以告诉你, 很多程序员都是完美主义者.

（2）让连接次数大量减少

用过 Opera 的朋友可能会对它那个显示图片下载的进度条印象很深, 它会显示 “已下载图片/图片总数”. 对于 Web 服务器上的每个独立资源, 都需要去连接和获取的. 所以大家都设法将很多图标放在一个图片上, 连接一次就全部取回来. 这也许是一图多标的主要目的.

（3） 让浏览器将图标预先下载

浏览器为了尽快地显示页面, 一般只是将打开页面时用到的图片下载到本地, 而一些可能用到, 但没有立刻被用到的图片需要在应用的时候再进行下载. 最经典的例子可能是导航菜单的 Tab 图标, 如果普通状态的 Tab 图标和鼠标悬停时的图标都是独立放置的, 那么当你鼠标移动到 Tab 按钮时, 图标才开始下载, 这样会带给用户很不好的视觉效果. 所以我觉得遇到这种情况时, 将多个图标合并在一起的处理是必须的.

【缺点】

（1）图片难以管理, 难以定位

如果你要更换一个图标, 那么你需要编辑整个大图片. 如果你要改变一个图标的大小, 很可能你需要重新计算它的位置, 甚至无从下手, 只能在别的位置再添加一个图标.

（2） 2 > 1

两个图标合成的图片是肯定比其中一个图标独占的图片大的, 也就是说, 下载这个图片所需的时间将比单独一个图标用的时间长. 浏览器显示图片一般都是下载完则显示或者边下载边显示的, 如果你那几个图标组成的图片容量比较大, 那么它们不能逐个显示予用户, 会造成很不好的用户体验.

【实现方式】

（1）PS手动拼图
适合小网站，图标不是很多的时候使用。

（2）使用sprite工具自动生成
CssGaga：一款自动化网页设计工具集合软件（该软件只能在Windows环境下运行）。
利用它能快速生成雪碧图及对应的background-position代码，还能进行css格式化,将css进行压缩，去掉多余的空格、换行、注释，并且进行兼容性的优化。

CssGaga

说明

可以访问ytzong的博客99css学习CssGaga的使用方法。

【使用注意事项】

（1）让图标尽量排列得有规律

有规律地排放的图标跟容易定位和维护, 这里的间隔可以使用 16, 32, 48, 96 等标准尺寸。

（2） 将背景颜色一致的图标放置在一起

如果背景颜色不一样, 最好分为两个或多个图片放置, 特别是背景颜色相近的, 很容易混淆。

（3） 将相同栏目的图标放置在一起

这样可以少写一些 CSS 代码. 设置一个 background, 再在每个项设置 background-position 就行了。

（4）不要将大图绑在一块

大图绑在一块影响页面加载速度，大部分用户都不会耐心地等待页面的所以文件被下载完毕再进行阅读。

示例：

雪碧图

DOM

对应CSS

效果

作者：萌三蛋子geocsj
链接：https://www.jianshu.com/p/2cac8fbe341b