创建叠加边框的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背景图片？

回答

相关问题