CSS3多重背景,一个重复ul [英] CSS3 multiple backgrounds, one repeating in ul
问题描述
我正在研究一个Wordpress模板。我试图实现3个背景图像用于动态生成的导航菜单中的每个< li>
。看看这两个例子。
I am working on a Wordpress template. I am trying to implement 3 background images to be used for each <li>
in the nav menu, which is generated dynamically. Take a look at the two examples.
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:
Second Example 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:
HTML:
<ul class="menu-item">
<li>ItemNumber1</li>
<li>ItemNumber2</li>
<li>ItemNumber3</li>
</ul>
我希望两个外部的bg图像留在没有重复的地方。但是,我希望中间的bg图像沿着x轴重复,但只扩展到其他bg图像。正如你在第二个例子中看到的那样,当中间图像被赋予 repeat-x
时,它遍及整个< li>
。据我所知,我不能使用< div>
来实现此目的,因为菜单的文本是即时生成的。所以,我假设我必须只有 a < ul>
,而不需要一堆< div>
挂在身边。任何帮助?
I want the two outer bg images to stay where there are with no repeat. But, I want the middle bg image to repeat along the x-axis, but only extend to the other bg images. As you can see in the second example, when the middle image is given repeat-x
it extends across the entire <li>
. As far as I know, I cannot use <div>
to make this happen because the text for the menu is generated on the fly. So, I assume I must have only a <ul>
without a bunch of <div>
s hanging around. Any help?
推荐答案
嘿,您可以使用之前 strong>伪类来获得您想要的结果。
hey you can use the after-before
pseudo class for your desired results.
请参阅 CSS :我是如何制作的: -
See the CSS how i made it :-
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;
}
查看输出结果 < img src =https://i.stack.imgur.com/aHvJN.pngalt =在这里输入图片描述>
See the output how i have done it
这篇关于CSS3多重背景,一个重复ul的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!