CSS中背景位置的正确距离答案

【问题标题】：right distance of background-position in CSSCSS中背景位置的正确距离
【发布时间】：2010-12-05 17:35:40
【问题描述】：

我在 CMS 上工作，我希望有不同的按钮来进行特殊编辑。我创建了一个小示例文件，如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>demo</title>
<style>
/* --- "breadcrumbs" --- */
ul.path         {margin:0;
                 padding:0;
                 padding-bottom:19px;
                 zoom:1;
                 overflow:hidden;}
ul.path li      {list-style-type:none;
                 list-style-position:outside;
                 height:28px;
                 overflow:hidden;
                 float:left;
                 margin-right:2px;
                 font-size:85%;
                 padding-left:10px;
                 line-height:19px;
                 background:url(hor.png) no-repeat left -90px;}
ul.path li.cur  {padding-left:10px;
                 background:url(hor.png) no-repeat left -60px;}
ul.path a       {padding:0 15px 0 0;
                 overflow:hidden;
                 float:left;
                 font-weight:normal;
                 height:26px;
                 padding-top:2px;
                 color:#fff;
                 text-decoration:none;
                 background:url(hor.png) no-repeat right -90px;}
ul.path li.cur a {color:#FFF;
                 font-weight:bold;
                 background:url(hor.png) no-repeat -180px -60px;}
</style>
</head>
<body>
<ul class="path">
    <li><a href="#">Webdevelopment</a></li>
    <li><a href="#">programming</a></li>
    <li><a href="#">database</a></li>
    <li><a href="#">modeling</a></li>
    <li class="cur"><a href="#">Dezign</a></li>
</ul>
</body>
</html>

我有一个看起来像这样的 png 背景图像 Background images with tiffrent right corners http://img10.imageshack.us/img10/1849/hor.png 结果如下所示： result http://img21.imageshack.us/img21/774/resultr.png 目标是获得不同的右角，但我尝试设置负距离不起作用。有人能给我一个解释吗？更有趣的是，有人可以给我一个解决方法，解决课程中的错误吗？

【问题讨论】：

我认为您应该在doctype.com 中提出您的 CSS 问题。

标签： html css background slice

【解决方案1】：

那是因为你设置了一个负距离，让你在第一个背景的中间有一块。如果您使用 -250px 之类的位置，您会更接近，但要获得准确，您必须在链接上设置固定宽度或使用所需背景位于右边缘的图像。

【讨论】：

哦，我也用负边距检查了它。不幸的是，结果是一样的。正确的解决方案是正确的。但是在这种情况下，我需要为每个右角设置一个特殊的行，而我的愿望是为每个右角设置一个特殊的位置，并为每个右角设置一个特殊位置，在那里我可以找到正确的角。当我阅读 CSS Backgroundposition 的规范时，我想，我可以给一个负值来到达右上角。但似乎，这不起作用。不幸的是。也许有人知道其他解决方案。不过谢谢你的回答。
@Lara：即使你使用负位置，它仍然是元素左边缘的位置。如果您不想为元素指定宽度，则可用于指定右边缘的唯一背景位置是“右”。因此，如果您不想指定宽度，唯一的解决方案是重新排列图像，以便在图像的右边缘获得所有右边缘。