CSS Sprite生成器
多图合并为雪碧图，支持水平/垂直/网格排列，自动生成CSS代码
已上传图片0 张
请上传图片（支持多选、拖拽）
CSS Sprite 生成器说明
CSS Sprite（雪碧图）是将多张小图标合并为一张大图的技术，通过 background-position 定位显示所需区域。它可减少 HTTP 请求数量，加快页面加载速度，是前端性能优化的经典手段。
排列方式：水平排列适合图标数量较少且宽度一致的场景；垂直排列适合宽度差异大的图标列表；网格排列兼顾两者，适合大量图标的高效组织。
background-position：Sprite 通过负坐标定位。CSS 中 background-position: -x -y 表示将背景图向左移动 x 像素、向上移动 y 像素，使目标区域显示在元素可视范围内。
实现原理：本工具使用 Canvas API 将上传的多张图片按选定布局绘制到一张画布上，同时记录每张图片的坐标位置，自动生成对应的 CSS 类规则和 background-position 值。
使用方法：上传多张图片，选择排列方向和间距，点击生成 Sprite。预览合成图后可下载 PNG 图片和 CSS 文件，也可直接复制 CSS 代码使用。每个图标对应一个 CSS 类，设置 background-image 和 background-position 即可。