CSS Sprite问题：水平背景位置

Question

我正在看这个精灵tutorial here。完成的CSS精灵结果为is here。这是整个工作代码：

#skyline {
 width: 400px;
 height: 200px;
 background: url(test-3.jpg);
 margin: 10px auto; padding: 0;
 position: relative;
}
#skyline li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}

#skyline li, #skyline a {height: 200px; display: block;}
#panel1b {left: 0; width: 95px;}
#panel2b {left: 96px; width: 75px;}
#panel3b {left: 172px; width: 110px;}
#panel4b {left: 283px; width: 117px;}

#panel1b a:hover {background: transparent url(test-3.jpg) 0 -200px no-repeat;}
#panel2b a:hover {background: transparent url(test-3.jpg) -96px -200px no-repeat;}
#panel3b a:hover {background: transparent url(test-3.jpg) -172px -200px no-repeat;}
#panel4b a:hover {background: transparent url(test-3.jpg) -283px -200px no-repeat;}

我有点困惑。在代码的a:hover部分（精灵应该显示的部分），精灵背景的垂直位置设置为-200px，这是有道理的，因为顶角需要是高于该背景图像的当前起点。但为什么水平位置需要为负（-96px，-172px）？我的第一个直觉是，如果你从0开始，那么下一个将从最后一个宽度开始，即+ 96px。如果我们谈论常规坐标，我不明白为什么我们在那里使用负值来处理水平位置......

现在，如果我将所有这些都改为正数，那么精灵就不再起作用了。那为什么它是负面的呢？有经验的人可以解释一下这个吗？非常感谢任何答案/输入谢谢

修改

这是主图像： Master Image

Answer 1

该位置指定在何处“滑动”spritesheet以在页面上显示图像。因此，如果图像向右移动96px，则需要将整个工作表向左滑动96px以使其进入视图。

实际上，您有4个宽度不同的面板。当鼠标悬停时，它会获取图像的副本，将其向上滑动200px以获取悬停图像，然后向左滑动以便在面板中开始正确的切片。面板的宽度将图像的右侧剪掉。