html - CSS背景分隔线的困难

Question

我制作了一个带有四个“按钮”的基本导航栏，并使用背景图像作为分隔线。我遇到的问题是当我创建一个 :hover 状态时，背景覆盖了分隔线。我该如何解决这个问题，以便始终显示分隔图像？

这是标记:

<div>                                                 
<ul class="main">                                
    <li><a href="#">Home</a></li>
    <li><a class="divl" href="#">Item1</a></li>
    <li><a class="divl" href="#">Item2</a></li>
    <li><a class="divl" href="#">Item3</a></li>
</ul>                                            
</div>  

---

ul.main {

margin: 0;
padding: 0;
list-style: none;
width: 1000px;
background: url(grad.png) repeat-x; 
overflow: hidden;}

ul.main li{

float: left;}

ul.main a {
padding: 0 3em;
line-height: 3em;
text-decoration: none;
display: block;
color: white;}

.divl {

background: url(a.png) repeat-y top left;}

ul.main a:hover, 
ul.main a:focus{

background: rgba(0,200,0,0.1);}

谢谢。

Answer 1

您可以将分隔符 background-image 应用于 li 元素:

ul.main li {
    float: left;
    background: url(http://dummyimage.com/1x100/f0f/fff) repeat-y top right;
}

参见:http://jsfiddle.net/825cK/