創建疊加邊框的CSS背景圖片？

我無法獲得背景圖像來覆蓋另一個div的邊框。我們有一個帶各種側欄的側欄面板，包括一個導航菜單。右側是內容面板。我們希望在側欄上選擇任何內容出現連接到內容面板：創建疊加邊框的CSS背景圖片？

alt text

在上面的例子中，沒有對個人信息<li>標籤的背景圖像。我想將此圖像向右擴展一個像素，以便所選值旁邊的行不可見。

這裏是我的子菜單（選擇）和內容區域向右CSS：

.submenu-item li span{ 
    padding: 4px 0 4px 16px; 
    min-height: 16px; 
    border-bottom:0px; 
} 

.submenu-item li{ 
    font-size:12px; 
    border: none; 
    padding: 0px 0 0px 16px; 
} 

.submenu-item span.Active{ 
    background-image: url(../images/submenu-select.png); 
    background-repeat: no-repeat; 
} 

#Content { 
    margin-left:190px; 
    border-left: 1px solid #b0b0b0; 
    padding: 20px; 
    background: #FFFFFF; 
    min-height:600px; 
}

是否有辦法不是把我的側邊欄右邊界（並排除它這樣做其他列表項標籤）？

來源

2009-07-01 Beep beep

對於有圖表的寫得好的問題+1。 – RichieHindle 2009-07-01 23:00:34

如果你在右邊有一個邊框，你就不能消除這部分邊框。

但是，你很幸運。嘗試在你的CSS中使用margin-right: -1px;。這會將

元素拖動到右側1個像素，並且希望在邊界之上。您可能還需要設置

position: relative; 
z-index: 100;

而且，因爲它是在向右1像素，使其左側與他人，您可能需要使有源元件1個像素寬對齊。

來源

2009-07-01 23:03:16 alex

我同意。我認爲這是理想的解決方案。 – 2009-07-02 00:54:43

工作很好，謝謝！ – 2009-07-02 03:02:27

Alex的解決方案應該可以工作，但另一種方法是從#Content中刪除border-left CSS atrtribute，並在包含子菜單項的DIV上使用1像素寬的灰色GIF或PNG圖像。

像這樣：

#SubMenu { background: url(grayline.gif) #CCCCCC top right; }

這將刪除需要擔心沒有對準選定的子元素。

來源

2009-07-02 00:40:44 Obfuskater

創建疊加邊框的CSS背景圖片？

回答

相關問題