页头广告招租
×
📱 手机扫码访问
用手机浏览器或微信扫一扫，即可在手机上访问当前页面
扫描后可直接在手机上使用该工具
×
📱 微信扫一扫分享
打开微信"扫一扫"，即可分享至好友或朋友圈
手机QQ也可扫描此二维码分享至QQ好友或QQ空间
💡
本工具全程在浏览器本地运行，图片不会上传到任何服务器，请放心使用。
📁
拖拽上传图片
点击或拖拽图片到此处
支持 PNG、JPG、GIF、WEBP，可批量选择多张
暂无图片，请上传
⚙️
生成设置
👁️
雪碧图预览
生成后在此预览
📋
CSS 代码生成
/* 生成雪碧图后，CSS代码将显示在这里 */
📝 使用说明
在线雪碧图生成器 全程在浏览器本地运行，图片不上传服务器，安全放心。
使用步骤：
第一步：上传图片
点击上传区域或将图片直接拖拽到页面中，支持 PNG、JPG、GIF、WEBP 格式，可一次性批量上传多张图片。上传后会在下方显示缩略图列表，鼠标悬停可查看尺寸，点击右上角「×」可删除单张图片。
第二步：调整设置
在右侧设置面板中选择排列方向（水平/垂直/网格）、图片间距、固定宽高、输出格式和网格列数。留空宽高则保持原图尺寸。
第三步：生成雪碧图
点击「生成雪碧图」按钮，按当前设置生成单张雪碧图。左下方预览区显示生成的雪碧图，并标注最终尺寸。支持点击「下载图片」保存到本地，或「复制Base64」直接获取编码。
第四步：批量生成
点击「批量生成」按钮，系统会同时按水平、垂直、网格三种排列方式各生成一张雪碧图，结果会显示在预览区下方的批量结果列表中。点击列表中的缩略图可切换预览，点击「批量下载全部」可一次性下载所有生成的雪碧图。
第五步：获取CSS代码
右下方代码区自动生成每张图片的 background-position 定位代码。可切换「CSS 背景定位」「Flex 布局」「Grid 布局」三个标签页查看不同代码，点击「复制」即可粘贴到项目中。
快捷操作：
点击「清空全部」一键移除所有图片和批量结果
所有代码区域均支持一键复制
批量结果支持单独删除不需要的条目
移动端和电脑端均可正常使用
使用步骤：
第一步：上传图片
点击上传区域或将图片直接拖拽到页面中，支持 PNG、JPG、GIF、WEBP 格式，可一次性批量上传多张图片。上传后会在下方显示缩略图列表，鼠标悬停可查看尺寸，点击右上角「×」可删除单张图片。
第二步：调整设置
在右侧设置面板中选择排列方向（水平/垂直/网格）、图片间距、固定宽高、输出格式和网格列数。留空宽高则保持原图尺寸。
第三步：生成雪碧图
点击「生成雪碧图」按钮，按当前设置生成单张雪碧图。左下方预览区显示生成的雪碧图，并标注最终尺寸。支持点击「下载图片」保存到本地，或「复制Base64」直接获取编码。
第四步：批量生成
点击「批量生成」按钮，系统会同时按水平、垂直、网格三种排列方式各生成一张雪碧图，结果会显示在预览区下方的批量结果列表中。点击列表中的缩略图可切换预览，点击「批量下载全部」可一次性下载所有生成的雪碧图。
第五步：获取CSS代码
右下方代码区自动生成每张图片的 background-position 定位代码。可切换「CSS 背景定位」「Flex 布局」「Grid 布局」三个标签页查看不同代码，点击「复制」即可粘贴到项目中。
快捷操作：
点击「清空全部」一键移除所有图片和批量结果
所有代码区域均支持一键复制
批量结果支持单独删除不需要的条目
移动端和电脑端均可正常使用
🔧 工具功能说明
在线雪碧图生成器是一款全程在浏览器本地运行的工具，图片不会上传到任何服务器，安全可靠。
主要功能：
1. 拖拽上传
点击上传区域或直接将图片拖拽到页面中，支持 PNG、JPG、GIF、WEBP 格式，可一次性批量选择多张图片。
2. 灵活排列
支持三种排列方式：水平排列（横向拼接）、垂直排列（纵向拼接）、网格排列（自动换行）。可设置图片间距、固定宽高、输出格式等参数。
3. 一键生成
点击「生成雪碧图」按钮，系统自动将所有图片合并为一张雪碧图，并实时预览生成结果，显示最终尺寸。
4. CSS 代码自动生成
生成雪碧图的同时，自动输出每张图片对应的 background-position 定位代码，支持切换查看 Flexbox 和 CSS Grid 布局代码，点击「复制」即可粘贴到项目中使用。
5. 可视化布局预览器（新手专用）
内置 Flex / Grid 布局可视化预览器，实时调整对齐方式、间距、换行等参数，即时看到效果并复制对应 CSS 代码，帮助前端新手快速理解布局原理。
6. 导出功能
支持下载生成的雪碧图图片文件，或一键复制 Base64 编码，方便直接嵌入 CSS 或 HTML 中使用。
操作提示：
鼠标悬停在已上传图片上，点击右上角「×」可删除单张图片
点击「清空全部」可一键移除所有图片重新上传
所有操作均在本地完成，无需联网
主要功能：
1. 拖拽上传
点击上传区域或直接将图片拖拽到页面中，支持 PNG、JPG、GIF、WEBP 格式，可一次性批量选择多张图片。
2. 灵活排列
支持三种排列方式：水平排列（横向拼接）、垂直排列（纵向拼接）、网格排列（自动换行）。可设置图片间距、固定宽高、输出格式等参数。
3. 一键生成
点击「生成雪碧图」按钮，系统自动将所有图片合并为一张雪碧图，并实时预览生成结果，显示最终尺寸。
4. CSS 代码自动生成
生成雪碧图的同时，自动输出每张图片对应的 background-position 定位代码，支持切换查看 Flexbox 和 CSS Grid 布局代码，点击「复制」即可粘贴到项目中使用。
5. 可视化布局预览器（新手专用）
内置 Flex / Grid 布局可视化预览器，实时调整对齐方式、间距、换行等参数，即时看到效果并复制对应 CSS 代码，帮助前端新手快速理解布局原理。
6. 导出功能
支持下载生成的雪碧图图片文件，或一键复制 Base64 编码，方便直接嵌入 CSS 或 HTML 中使用。
操作提示：
鼠标悬停在已上传图片上，点击右上角「×」可删除单张图片
点击「清空全部」可一键移除所有图片重新上传
所有操作均在本地完成，无需联网
📌 广告位
暂无广告内容
页尾广告招租
友情链接