CSS：背景如何扩展边框和重叠？

Question

我正在使用以下代码设计导航栏，如下图（a）所示：

<ul>
  <li class="unselected">Step 1</li>
  <li class="selected">Step 2</li>
  <li class="unselected">Step 3</li>
  <li class="unselected">Step 4</li>
  <li class="unselected">Step 5</li>
</ul>

我希望有一个背景图像用于未选择的步骤（d），一个用于所选步骤（c）。为简单起见，我们假设步骤1和步骤5也使用相同的背景。 我想仅使用类名调整HTML中的按钮背景。

问题是我如何用CSS实现结果？我只是想知道两个相邻元素的背景如何相互重叠？

编辑：步骤是链接。背景是一个透明的PNG文件，最好只包含蓝色或灰色的形状及其边框。

Answer 1

答案：http://jsfiddle.net/morrison/99LhB/

备注：

• 点击框会在对角线上混乱。我刚才意识到这种情况总是如此。如果我是你帮助避免这个问题，我会减小箭头的宽度。我还会添加一个悬停状态，这有助于澄清你正在徘徊的那个。如果它们不是超链接，则无关紧要：随意删除那些css规则。
• 在这种情况下，HTML简单性使CSS复杂性。需要担心的课程较少，但现在我们依赖CSS选择器。我会亲自选择这种方式，但这是个人选择。
• 只有一张图片。使用CSS精灵来完成此任务。它还加快了网页的速度。
• 显示它如何查找所有5个步骤。

Answer 2

你可以这样做。你想要做的是使用负余量。

.someclass {
    margin-left: -5px;
}

这应该与每个元素重叠（如果应用于所有li对象）。

Answer 3

它们不能仅与背景重叠，但html元素可能会堆叠。但是，只有在没有其他人的情况下，我才会推荐这样的解决方案。

在您的视觉示例中，我猜必须是这样的：

Html：

<ul>
  <li class="before_selected">Step 1</li>
  <li class="selected">Step 2</li>
  <li class="after_selected">Step 3</li>
  <li class="unselected">Step 4</li>
  <li class="unselected">Step 5</li>
</ul>

CSS：

.unselected {
  background-image: url('all_grey.jpg');
}
.before_selected {
  background-image: url('left_grey_right_blue.jpg');
}
.after_selected {
  background-image: url('left_blue_right_grey.jpg');
}
.selected {
  background-image: url('all_blue.jpg');
}