点击上传或拖拽图片到此处
支持 PNG、JPG、GIF、WebP 格式，最多同时上传20张
本工具专为前端开发者和UI设计师打造，帮助您快速将多张小图标或图片合并为一张精灵图（CSS Sprite），并自动生成对应的CSS定位代码。以下是详细的使用步骤：
上传图片：点击虚线区域或将图片拖拽到上传区域，支持一次选择多张图片（建议不超过20张）。上传后图片会以缩略图形式显示在下方，您可以点击每张缩略图右上角的×按钮移除不需要的图片。支持PNG、JPG、GIF和WebP等常见格式。
设置排列方式：工具提供三种排列模式。水平排列将所有图片从左到右依次排列，适合横向导航条或工具栏。垂直排列将图片从上到下排列，适合侧边栏图标。网格排列则按设定的列数排成多行多列的矩阵，适合图标数量较多的场景。您还可以调整图片之间的间距（像素值）以及精灵图的背景色。
生成与下载：点击「生成精灵图」按钮后，工具会在Canvas中实时合成精灵图并显示预览。确认无误后，点击「下载PNG」即可保存精灵图文件。同时工具会自动生成对应的CSS代码，包含每个子图的类名、尺寸和background-position定位信息，直接复制到项目中即可使用。
图片精灵图在前端开发和UI设计中应用广泛，以下是几个典型的使用场景：
网站图标集：将网站的导航图标、功能按钮、社交图标等合并为一张精灵图，可以显著减少HTTP请求数量。对于包含20个图标的网站，使用精灵图可以将20个请求减少为1个，大幅提升首屏加载速度和用户体验。
游戏开发资源：在2D游戏开发中，精灵图是管理游戏素材的标准做法。将角色的不同动作帧、道具、地图瓦片等合并为精灵图，配合CSS或Canvas的background-position定位，可以高效管理和加载游戏资源。
移动端App开发：在移动端网页或混合应用（Hybrid App）中，网络带宽和加载速度至关重要。使用精灵图可以减少资源加载次数，降低电量消耗。本工具生成的精灵图为PNG格式，支持透明通道，完美适配iOS和Android开发需求。
CSS精灵图的原理：CSS精灵图（CSS Sprite）技术是将多张图片合并为一张大图，然后通过CSS的background-image和background-position属性来显示不同区域的技术。浏览器只需下载一张图片，然后通过调整background-position来显示需要的部分，从而大幅减少HTTP请求数量。
精灵图 vs 图标字体：图标字体（如Font Awesome）是另一种常用的图标解决方案。相比精灵图，图标字体可以无损缩放、支持CSS颜色控制，但只适用于单色图标且对可访问性支持较差。精灵图则适合需要多色、复杂图案或照片级图标的场景。现代前端开发中，SVG Sprite和CSS Sprite并行使用的情况也很常见。
性能优化建议：使用精灵图时，建议将尺寸相近的图片放在一起，避免过大的空白区域浪费内存。对于Retina/HiDPI屏幕，建议提供2x或3x高清精灵图。此外，可以结合CSS的background-size属性实现精灵图的响应式缩放，确保在不同设备上都能清晰显示。
CSS精灵图是将多张小图片合并为一张大图的技术，通过background-position属性显示不同区域。这样可以减少HTTP请求次数，提升网页加载速度。
生成的精灵图为PNG格式，支持透明背景。上传的图片可以是PNG、JPG、GIF、WebP等浏览器支持的格式。
生成后下载PNG图片和CSS代码。将PNG图片放在项目目录中，然后在CSS中引入生成的代码。每个子图对应一个class，通过background-position定位显示对应区域。
理论上没有数量限制，但建议一次上传20张以内以保证性能。所有处理在浏览器本地完成，图片不会上传到服务器。
网格排列是将图片按指定的列数排列成多行多列的矩阵形式。例如选择每行4列，则每4张图片换行。适合图标数量较多且尺寸相近的场景。
可以。默认背景为透明，你也可以选择白色、黑色或其他自定义颜色。对于本身没有透明通道的JPG图片，设置背景色可以避免边缘出现杂色。
是的。生成的CSS代码包含每个子图的class定义，包括width、height、background-image和background-position。你只需要修改background-image的URL路径即可直接使用。
不会。所有图片处理都在浏览器本地完成，使用Canvas API进行图片合成。图片数据不会离开你的设备，绝对保护隐私。