CSS:背景如何扩展边框和重叠?

时间:2011-06-30 14:50:36

标签: html css

我正在使用以下代码设计导航栏,如下图(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>

The navigation bar

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

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

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

3 个答案:

答案 0 :(得分:5)

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

备注:

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

答案 1 :(得分:4)

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

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

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

答案 2 :(得分:-1)

它们不能仅与背景重叠,但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');
}