2

我正在开发一个 Wordpress 模板。我正在尝试实现 3 个背景图像，用于<li>动态生成的导航菜单中的每个。看看这两个例子。

http://preahkumpii.com/misc/test01/hi.html
http://preahkumpii.com/misc/test02/hi.html

第一个示例 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;
}

第二个示例 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, repeat-x;
}

HTML：

<ul class="menu-item">
  <li>ItemNumber1</li>
  <li>ItemNumber2</li>
  <li>ItemNumber3</li>
</ul>

我希望两个外部背景图像保持在没有重复的位置。但是，我希望中间的 bg 图像沿 x 轴重复，但只延伸到其他 bg 图像。正如您在第二个示例中看到的那样，当给出中间图像时，repeat-x它会延伸到整个<li>. 据我所知，我不能用它<div>来实现这一点，因为菜单的文本是动态生成的。所以，我想我必须只有a<ul>没有一堆<div>s 闲逛。有什么帮助吗？

4

1 回答 1

3

嘿，您可以使用after-before 伪类来获得所需的结果。

看看我是如何做到的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;
}

查看输出我是如何做到的在此处输入图像描述

于 2012-11-20T06:53:48.277 回答