我正在使用以下代码设计导航栏,如下图(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文件,最好只包含蓝色或灰色的形状及其边框。
答案 0 :(得分:5)
答案:http://jsfiddle.net/morrison/99LhB/
备注:强>
答案 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');
}