如何修复带有圆形图像背景的CSS菜单

Question

我想在左右菜单上显示圆角图像。您可以看到示例 here 。背景图片是：

<ul>
    <li><a class="current" href="">Home</a></li>
    <li><a href="">Faq</a></li>
    <li><a href="">About</a></li>    
</ul>

让我知道在没有剪切当前图像的情况下实现我的目标的CSS技巧。

---

结果应该是这样的

---

Here 是使用sliding doors technique

的最终结果

Answer 1

您应该使用border-radius:5px和background: linear-gradient(startcolor, endcolor);

对于IE支持，请使用CSS3PIE

示例http://jsfiddle.net/gaby/9DENH/4/

Answer 2

你可以使用CSS圆角，它可以很好地使用那里的背景图像（虽然你不需要图像的角落是圆形的，图像也不必太宽 - 10px宽只是找到它重复-x。

li a:link, li a:visited {
     background-image: url('../images/navBg.jpg');
     background-repeat: repeat-x;
     background-position: top left;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    }

li a:hover, li a:active{
    background-position: bottom left;
    }

Answer 3

使用推拉门技术。 而你的主要问题是<li>被浮动，因此<ul>的高度为0。你也可以浮动ul，或者给它overflow:hidden

http://jsfiddle.net/9DENH/3/

================================

更新： 对不起速读有一天会杀了我:)。

以下是我更新的答案：http://jsfiddle.net/9DENH/5/

将此添加到css：

li {
padding-left: 10px;/* to create gap that will not be overlapped with <a> background */
background:url(http://i.stack.imgur.com/yLgZA.png) no-repeat left top #000;

}
li a, li a.current {
background:url(http://i.stack.imgur.com/yLgZA.png) no-repeat right top #000;
    text-indent: -10px; /* same as li padding, to realign centered text */
}

这是你应该添加悬停状态的基础。

Answer 4

您是否尝试将图像用作精灵？

如果是这样，你必须在背景上选择不同的位置， 你还必须为每个元素定义高度和宽度。