Question

background-position：-200px 0;

一个网站说它从底部裁剪图像并显示其余部分 ..另一个网站说它将图像向左移动......它到底是做什么的？

我正在尝试实现CSS Sprites ..因为这个定位问题而有问题...这是我到目前为止实现的...它不能正常工作..我有很少的链接，我想要一个差异部分当鼠标移动到特定链接上时要显示的图像...我正在显示输出，因为整个图像正在显示..它甚至不会裁剪它..我尝试了很多东西，比如改变定位，添加div ...没有..现在我迷失了，我甚至都不知道我从哪里开始......有人可以指出我在这里做错了什么吗？为什么图像没有被裁剪......这个定位X，Y值确实有问题.... 这是代码： -

<style type="text/css">
#sprite ul{background:url(images/image.jpg) no-repeat;
width:728px;height:1225px;display:block}

#ID1{background-position:0 -1000px}
#ID1:hover{background-position:0 -1000px}

#ID2{background-position:0 -1000px}
#ID2:hover{background-position:0-800px}

#ID3{background-position:0 1000px}
#ID3:hover{background-position:0 -600px}

#ID4{background-position:0 1000px}
#ID4:hover{background-position:0 -400px}

#ID5{background-position:0 1000px}
#ID5:hover{background-position:0 -200px}

#ID6{background-position:0 1000px}
#ID6:hover{background-position:0 -200px}
</style>

HTML： -

<div id="sprite">
<ul>
    <li><a href="#" id="ID1">link1</a></li>
    <li><a href="#" id="ID2">link2</a></li>
    <li><a href="#" id="ID3">link3</a></li>
    <li><a href="#" id="ID4">link4</a></li>
    <li><a href="#" id="ID5">link5</a></li>
    <li><a href="#" id="ID6">link6</a></li>
</ul>
</div>

Answer 1

background-position: -157px 0;会将图像向左移动157像素。它不会被裁剪。

您的代码的主要问题是您在ul上设置背景图片，但随后更改了链接上的背景位置。因此，您的背景位置规则将无效，因为链接没有背景。您希望在所有链接上设置相同的背景图像，可能使用以下内容：

#sprite ul a {
    background-image: url(images/image.jpg);
    background-repeat: no-repeat;
}

以及一些适当的尺寸，然后从那里拿走。

Answer 2

一个网站说它从底部裁剪图像并显示其余部分..另一个网站正在说它将图像向左移动......它到底是做什么的？

如果有疑问，请相信the specification;水平位置在垂直位置之前。

#sprite ul

如果要将图像的一部分显示为列表项或锚点的背景，则必须在该元素上设置背景。在这里，您只需将整个图像作为背景列表本身，其他所有内容都放在其上。

相反，您需要在每个链接上放置一个图像副本。

#ID2:hover{background-position:0-800px}

两个值之间需要一个空格

Answer 3

background-position属性是background-position-x和background-position-y的复合属性，因此第一个值是水平位置，第二个值是垂直位置。

位置是图像相对于左上角元素的左上角，因此负x值表示图像位于元素的左侧，实际上是从左侧裁剪图像。

（因此，该网站说从底部裁剪图像的价值顺序和方向都混淆了。）

这个CSS属性中的负值是什么？

3 个答案: