CSS 精灵图生成
免费在线 CSS Sprite 精灵图生成工具
什么是 CSS Sprite？
CSS Sprite 将多张小图片合并到单个图片文件（精灵图）中。然后使用 CSS background-position 从合并文件中显示各个图片。这减少了 HTTP 请求数量，提高页面加载性能。
如何创建 CSS Sprite
上传多张图片。选择布局（水平、垂直或网格）。工具将它们合并为单个精灵图并生成每张图片的 CSS background-position 值。
▶CSS Sprite 还有用吗？
随着 HTTP/2 多路复用，Sprite 的性能优势已减少。但在提供大量小图标或需要单文件缓存的图标系统时，Sprite 仍然有帮助。
▶Sprite 的最佳布局是什么？
水平布局适合少量图片，很紧凑。网格布局适合许多相似尺寸的图标。垂直布局适用于所有图片宽度相同的情况。
▶如何使用生成的 CSS？
CSS 在精灵图上使用 background-image，每个图标使用 background-position。将生成的类应用到 HTML 元素上。