Question

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

这是标记：

<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/

Answer 2

如何将背景图像外的分隔线放在列表项中？然后您可以根据需要设置分隔线的样式，而不会出现：悬停背景阻碍。

类似的东西：

<li><a href="#">link here</a><div class="divider"></div></li>

-OR -

将分隔符放在列表项中作为背景。

Answer 3

在我看来，你的背景整体结构存在一个更基本的问题。如果用户在浏览器上放大文字，无论您旋转它的方式如何，文字都会与背景图片上的边框重叠。

这很难，因为我无法看到背景应该是什么，但如果你的背景只是一个垂直的线性渐变，你可能最好将它切片并将其作为每个List Item的单个背景整个无序清单。

这样您就可以灵活地使用边距修复最初发布的问题，并且如果您需要添加其他“按钮”，也可以让您的工作更轻松。

CSS背景分隔符难度大

3 个答案: