代码之家  ›  专栏  ›  技术社区  ›  Beep beep

创建覆盖边框的CSS背景图像?

  •  13
  • Beep beep  · 技术社区  · 15 年前

    我很难得到一个背景图像来覆盖另一个分区的边界。我们有一个侧边栏面板,有各种侧边栏,包括一个导航菜单。右边是内容面板。我们希望边栏上选择的任何内容显示为连接到内容面板:

    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;
    }
    

    除了在我的侧边栏上添加右边框(并将其排除在列表项标记中)之外,还有其他方法可以做到这一点吗?

    2 回复  |  直到 15 年前
        1
  •  14
  •   alex    15 年前

    如果你在右边有一个边界,你就是不能消除这部分边界。

    不过,你很幸运。试用使用 margin-right: -1px; 在你的CSS中。这将拖动

    元素的右边是1个像素,希望在边框上。您可能还需要设置

    position: relative;
    z-index: 100; 
    

    另外,因为它在右边1个像素,为了使它与其他像素在左边对齐,您可能需要使活动元素1个像素更宽。

        2
  •  1
  •   Obfuskater    15 年前

    Alex的解决方案应该有效,但另一种方法是从内容中删除border-left css-attribute,而在包含子菜单项的DIV上使用1像素宽的灰色GIF或PNG图像。

    这样地:

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

    这样就不必担心所选子菜单元素没有对齐。