如何在所有div（面包屑箭头）上保留CSS背景图片？

我已经构建了一个小型面包屑示例，它克隆了Google设计中的一些功能。我一直在寻找让箭头显示在对方的顶部，所以没有任何空白。我尝试过利润率下降，可能定位但我无法获得任何工作。如何在所有div（面包屑箭头）上保留CSS背景图片？

下面是一个链接到谷歌的工作示例，以及我目前的演示示例和为什么面包屑目前不工作的截图。感谢任何帮助，我也很乐意澄清任何事情！

2011-08-19 Jake

你会好吗使用JavaScript/jQuery的解决方案？ –

这不是必需的。 –

Google正在使用纯CSS。 –

的谷歌实现使用的CSS postion: relative; margin-left: -13px但在同一时间，他们使用的是内嵌样式，为不同的z-index，以这样的每一个环节：image

使用JavaScript或后端脚本循环遍历每个链接，并为每个链接指定一个较低的z-index。

2011-08-19 18:29:29 Michael

非常感谢你的救命！我可能会使用jQuery，但为每个图层添加不同的类似乎更适合此实现。 – Jake

试试这个：

.crumbs li { 
display: inline; 
float: left; 
margin-right: -11px; 
position: relative; 
}

所以他们适合其他人。现在补充一点：

.crumbs li:nth-child(1) { 
z-index:10; 
} 
.crumbs li:nth-child(2) { 
z-index:9; 
} 
.crumbs li:nth-child(3) { 
z-index:8; 
}

等

唯一的问题是，第n个孩子是CSS3，所以它是不利于你的跨浏览器的支持。你也可以将类添加到li中，比如“li.first li.second li.third”等，并给它们减少z-index。那么它应该工作

2011-08-19 18:28:39 vanErp

是的，这是很棒的家伙。我想我会使用.first，.second等等。它会使开发过程变得更容易。 – Jake

那么，谷歌的使用精灵，相对定位和增量z-索引。我认为你应该采用同样的技术。他们使用内联样式和style=""属性来实现z索引，这在这种情况下似乎是可以接受的，尤其是如果它们是在稍后使用PHP生成的。

2011-08-19 18:32:07

这样做的另一种（有点毛刺）的方式是添加一个具有相同背景图像的包装。例如

<li> 
    <div style="float: left; background-image: url('img/bg-crumbs.png');"> 
     <a href="#">2011 Writing</a> 
    </div> 
</li>

除了最后一个以外。

2011-08-19 18:41:56

添加左：-12px;到面包屑的李元素的风格。这只有在他们的立场设定为相对的情况下才有效;

此外，对于我的解决方案，添加一个PHP或JavaScript，例如添加到每个元素style =“z-index：10;”。脚本应该自动增加z-index属性。如果你使博客静态等没有PHP或JavaScript设置z-index manualy。

2011-08-20 09:37:11

回答