如何理解CSS背景位置坐标

Question

每当我创建一个用作css背景图像的精灵时，我必须处理数学并提醒自己如何记住X和Y坐标（以像素为单位）。我怎么能记住它或者直观地看它呢？

Answer 1

我想出了这张图片，希望它对其他人也有帮助。

Answer 2

用'SKY'思考'Y'押韵，这样你的顶部测量值（px的距离）就从顶部开始。这留下'X'作为剩余距离（距离左边的距离）

当我说左边的距离和距离顶部的距离时，我指的是从整个图像的侧面到要显示的部分的距离（以像素为单位）。

Answer 3

我通常将图像保存在Sprite表格的任何位置，然后通过点击Fireworks中的每个图形元素（我使用烟花）然后否定坐标来检查那里的坐标。例如：如果元素位于x = 23px且y = 20px，那么在CSS中，我使用 background-position:-23px -20px 。这总能完成工作。