css - 使用图像而不是 CSS 中的边框模拟导航菜单边框

Question

我想要的是一个看起来像这样的菜单:

| one | two | three | four|

使用 CSS 和边框可以通过以下方式完成类似的事情:

.myContainer > ul > li{
    border-right: 1px solid purple;
}

.myContainer > ul > li:first-child{
    border-left: 1px solid purple;
}

我已获得客户想要用作边框的垂直图像。伟大的。没什么大不了的。直到我尝试实现它:

.nav-main > ul > li{           
    background: url('/Images/vertLine.png')no-repeat right top;
}

.nav-main > ul > li:first-child{           
    background: url('/Images/vertLine.png')no-repeat left top;
}

这给我的输出是:

| one  two | three | four|

关于如何使用图像实现此目的有什么想法吗？

Answer 1

多张背景图片

.nav-main > ul > li{           
    background: url('/Images/vertLine.png')no-repeat right top;
}

.nav-main > ul > li:first-child{           
    background: 
      url('/Images/vertLine.png')no-repeat left top,
      url('/Images/vertLine.png')no-repeat right top;
}