CSS Sprite问题:水平背景位置

Question

我在这里看这个精灵教程.完成的CSS sprite结果就在这里.这是整个工作代码:

#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.如果我们谈论常规坐标,我不明白为什么我们在那里使用负值来处理水平位置......

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

编辑:

这是主图像: 主图像

Answer 1

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

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