用图像模拟导航菜单的边框，而不是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;
}