CSS：背景位置不起作用答案

【问题标题】：CSS: background-position not workingCSS：背景位置不起作用
【发布时间】：2012-01-26 08:51:12
【问题描述】：

我正在尝试使用 CSS 让导航栏定位在图像上。然而，我似乎无法正确定位，不断发生的情况是图像的前 200 像素不断出现，而不是背景定位的下 200 像素，如果这有任何意义的话。这是代码，请帮忙。

HTML：

<div id="topnav">
  <ul>
    <li id="nav-home"><a href="index.html">Feature Product<span></span></a></li>
    <li id="nav-all"><a href="shop_owners.html">All Products<span></span></a></li>
    <li id="nav-how"><a href="all_products.html">How It Works<span></span></a></li>
  </ul>
</div>

CSS：

#topnav {
  position: relative;
  left: 150px;
  top: 100px;
  margin: 0;
  padding: 0;
  height: 50px;
}

#topnav ul {
  list-style-type: none;
  text-align: center;
  line-height: 50px;
}

#topnav ul li {
  float: left;
}

#topnav ul li a {
  background: url(../nav-bar-2.png);
  background-repeat: no-repeat;
  display: block;
  height: 50px;
  position: relative;
}

#nav-home {
  width: 200px;
}

#nav-all {
  width: 200px;
  background-position: -200 0px
}

#nav-how {
  width: 200px;
  background-position: -400px 0px
}

#topnav ul li a span {
  background: url(../nav-bar-2.png) no-repeat scroll bottom left;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  z-index: 100;
}

#topnav li a span:hover {
  cursor: pointer;
}

#nav-home span {
  background-position: 0px -50px
}

#nav-all span {
  background-position: -200 -50px;
}

#nav-how span {
  background-position: -400 -50px;
}

【问题讨论】：

那是您的确切代码吗？您的值缺少几个像素。
是的。对不起，我不知道你在说哪些。我正在尝试为我的班级制作网页，但我不太擅长。
您有几个位置不正确。背景位置：-200 -50px；每个值都需要有一个测量值（px），即-200px -50px；

标签： html css background positioning

【解决方案1】：

我认为这是问题所在：

#nav-home{width:200px;}
#nav-all{width:200px; background-position:-200 0px}
#nav-how{width:200px; background-position:-400px 0px}

第二个和第三个元素的代码分别将背景图像向左移动 200px 和 400px。但是，#nav-all 和#nav-how 没有背景图像，因为您设置的唯一位置是链接上以及链接和这些 li 元素内部的跨度。

尝试进行此更改：

#topnav ul li {background:url(../nav-bar-2.png); // a was removed from end of list

现在背景图像位于 li 元素上，它的 css 代码可以将其向左移动正确数量的像素。（我几乎总是在 CSS 中指定一个 id 应用于哪个标签，因为它可以帮助减少这个问题，至少在非生产代码中是这样。这意味着您将使用 li#nav-home 和 li#nav-all 来帮助您准确了解 id 的哪个元素适用于）。

此外，请勿在以像素为单位的长度值上省略 px。虽然有些浏览器使用 px 作为默认长度，但最好不要依赖这种行为，而只是明确声明单位为 px。 :D

【讨论】：

@BryceEasley 很高兴我能帮上忙。 :)

【解决方案2】：

您没有指定单位。仅-200 本身就可能意味着很多事情。使用-200px。

【讨论】：

【解决方案3】：

您正在设置 LI-tag 的背景位置，但您将背景图像放在其他东西上，span-tag，而且您甚至没有正确格式的 @987654324 @标签。

【讨论】：

感谢您的回复。我仍然很困惑。如果背景图像在其他东西上，那么为什么图像会出现在链接上。我正在尝试复制类似dragoninteractive.com 的内容。然而我的问题是导航栏只是为每个链接一遍又一遍地重复主页图像。