如何在所有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

回答