html - CSS Sprite 问题 : horizontal background position

Question

我在看这个 Sprite tutorial here .完成的 CSS Sprite 结果 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部分( Sprite 应该出现的部分)， Sprite 背景的垂直位置设置为-200px，这这是有道理的，因为顶 Angular 需要高于该背景图像的当前起点。但是为什么水平位置需要为负数(-96px，-172px)？我的第一直觉是，如果你从 0 开始，那么下一个将从最后一个的宽度开始，即 +96px。如果我们谈论的是常规坐标，我不明白为什么我们应该在那里对水平位置使用负值...

现在，如果我将它们全部更改为正值，则 Sprite 将不再起作用。那为什么是负的呢？有 CSS 经验的人可以向我解释一下吗？非常感谢任何回答/输入谢谢

编辑:

这是主图: Master Image

Answer 1

位置指定将 spritesheet“滑动”到哪里以在页面上显示图像。因此，如果图像向右移动 96px，则需要将整个工作表向左滑动 96px 才能将其显示出来。

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