Html CSS3多个背景，一个在ul中重复

我正在制作Wordpress模板。我试图为nav菜单中的每个

实现3个背景图像，这是动态生成的。看看这两个例子

第一个示例CSS：

.menu-item li {
  background-image: url(images/menu-left.png), url(images/menu-right.png), url(images/menu-center.png);
  background-position: left, right, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

.menu-item li {
  background-image: url(images/menu-left.png), url(images/menu-right.png), url(images/menu-center.png);
  background-position: left, right, center;
  background-repeat: no-repeat, no-repeat, repeat-x;
}

第二个示例CSS：

.menu-item li {
  background-image: url(images/menu-left.png), url(images/menu-right.png), url(images/menu-center.png);
  background-position: left, right, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

.menu-item li {
  background-image: url(images/menu-left.png), url(images/menu-right.png), url(images/menu-center.png);
  background-position: left, right, center;
  background-repeat: no-repeat, no-repeat, repeat-x;
}

HTML:

项目编号1
项目编号2
项目编号3

---

我希望两个外部bg图像保持在没有重复的地方。但是，我希望中间的bg图像沿x轴重复，但仅扩展到其他bg图像。正如您在第二个示例中所看到的，当中间图像被赋予

repeat-x

时，它会延伸到整个

。据我所知，我无法使用

实现这一点，因为菜单的文本是动态生成的。因此，我假设我必须只有一个

，而没有一堆

在周围徘徊。有什么帮助吗？

嘿，您可以使用

后-前

伪类获得所需的结果

查看CSS我是如何制作的：-

CSS

.menu-item li:after {
    background: url("images/menu-center.png") repeat-x scroll 0 0 transparent;
    bottom: 0;
    content: " ";
    left: 20px;
    position: absolute;
    right: 20px;
    top: 0;
    z-index: -1;
}
.menu-item li {
    background-image: url("images/menu-left.png"), url("images/menu-right.png");
    background-position: left center, right center;
    background-repeat: no-repeat, no-repeat;
    display: inline-block;
    height: 56px;
    line-height: 56px;
    min-width: 60px;
    padding: 0 20px;
    position: relative;
    text-align: center;
    z-index: 1;
}

查看我如何完成的输出