我正在制作 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>
我希望两个外部背景图像保留在没有重复的位置。但是,我希望中间的背景图像沿 x 轴重复,但仅延伸到其他背景图像。正如您在第二个示例中所看到的,当给出中间图像 repeat-x
时它延伸到整个<li>
。据我所知,我不能使用<div>
为了实现这一点,因为菜单的文本是动态生成的。所以,我假设我必须只有一个 <ul>
没有一堆<div>
还在闲逛。有什么帮助吗?
最佳答案
嘿,您可以使用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;
}
查看我是如何完成的输出
关于html - CSS3 多个背景,一个在 ul 中重复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13467830/