创建CSS背景图像以覆盖边框？

Question

我在尝试让一个带背景图的 div 覆盖另一个 div 的边框时遇到了问题。我们有一个侧边栏面板，其中包括一个导航菜单。右侧是内容面板。我们希望在侧边栏上选择任何内容时都会出现与内容面板关联的效果： 在上面的示例中，Personal Info

标记上有一个背景图像。我想将此图像向右延伸一个像素，以使所选值旁边的线条不可见。

以下是我的子菜单（已选）和右侧内容区域的 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;
}

除了在我的侧边栏上添加右边框（并在列表项标记上排除它），还有其他方法实现这一点吗？

- Beep beep

---

感谢您提供清晰的问题和图表，给予 +1。 - RichieHindle

Answer 1

如果您在右侧有边框，那么就不能消除该边框部分。 但是，您很幸运。尝试在CSS中使用margin-right: -1px;。这将使该元素向右移动1个像素，并希望超出边框。您可能还需要设置。

position: relative;
z-index: 100; 

此外，由于它向右超出了1像素，为了使其与其他元素左对齐，您可能需要将活动元素的宽度增加1像素。

- alex

---

我同意。我认为这是理想的解决方案。 - Zack The Human

Answer 2

Alex的解决方案应该可以工作，但另一种方法是从#Content中删除border-left CSS属性，而是在包含子菜单项的DIV上使用1像素宽的灰色GIF或PNG图像。

就像这样：

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

这将消除担心所选子菜单元素未对齐的需要。

- Obfuskater

---

这种方法可行，但它会增加另一个服务器请求。我不建议您采用这种解决方案。 - Tomkay