Sprite Cow

Sprite Cow

为精灵图生成 CSSSprite Cow 帮助你获取精灵图中各个图像的位置与尺寸,并生成包含 background-position、width 和 height 的可复制 CSS 代码。你可以加载示例图片,在精灵图上点击查看对应结果。

Sprite Cow 页面快照
3
生成的 CSS 属性:background-position、width、height
1
可加载的官方示例图片
CSS
输出格式
核心能力

从精灵图快速提取 CSS 参数

通过手动控制精灵图中的图像位置,减少在图形应用中反复抄录坐标和尺寸的工作。

精灵图区域选择

在 spritesheet 上点击图像区域,查看对应精灵的位置与尺寸。

生成可复制 CSS

输出包含 background-position、width 和 height 的 CSS 代码片段。

加载示例图片

提供官方示例精灵图,便于直接体验图像选择和 CSS 生成流程。

保留手动优化控制

支持手动制作精灵图时获取精确坐标与尺寸,保留对优化和压缩的控制。

项目资源

官方项目与反馈渠道

提供示例图片、GitHub 项目仓库、Bug 与功能追踪器以及 Twitter 更新入口。

Sprite Cow

从这里开始使用Sprite Cow。