雪碧图生成器
将多张图片合并为一张雪碧图，并自动生成 CSS 代码。100% 在浏览器中运行。
Ctrl+Enter 运行Ctrl+Shift+C 复制
了解更多
CSS 雪碧图生成器：用 CSS 代码合并图片
了解如何创建雪碧图，并自动生成 CSS background-position 代码以优化网页。
什么是 CSS 精灵图
精灵图（sprite sheet）会将多张小图合并为一个较大的图像文件。每张单独的图像在图集中占据一块划定的区域。在网页开发中，可以使用 CSS 的 background-position 只显示每个元素所需的那部分精灵图，从而减少 HTTP 请求，提升页面加载性能。
阅读约 5 分钟阅读完整指南