🎨 CSS雪碧图生成器

关于这个工具

CSS雪碧图生成器是一款为前端开发者和性能优化工程师设计的专业工具，帮助您将多张图片合并为一张雪碧图（Sprite），并自动生成对应的CSS背景定位代码。您只需通过拖拽或点击上传多张图片（支持PNG、JPG、GIF、SVG格式），工具便会按照您选择的排列方式（水平排列、垂直排列或紧凑排列）自动布局并合成一张完整的雪碧图。工具会精确计算每张图片在合成图中的位置（background-position）和尺寸，生成可直接使用的CSS代码，并同时提供HTML示例。您还可以设置图片间距、选择输出格式（PNG/JPEG/WebP）和自定义CSS类名前缀。所有处理在浏览器本地完成，是减少HTTP请求、提升网页加载速度的得力助手。

功能特点

• 📁 支持拖拽或点击上传PNG、JPG、GIF、SVG图片
• 🔄 支持水平排列、垂直排列和紧凑排列三种布局
• 📏 可自由调节图片间距和CSS类名前缀
• 🖼️ 支持PNG、JPEG、WebP三种输出格式
• 📋 自动生成精确的background-position CSS代码
• 📄 同时提供HTML示例代码
• 📥 一键下载生成的雪碧图
• 📋 一键复制CSS或HTML代码
• 🌐 完全在浏览器本地运行，图片不上传服务器

使用场景

• 🚀 将网站中的图标、按钮等小图片合并为雪碧图，减少HTTP请求
• 📦 优化网页加载速度，提升用户体验
• 🎨 管理和维护项目中的图片资源
• 🛠️ 作为前端自动化构建流程中的图片合并工具
• 📖 学习雪碧图原理和CSS背景定位技术