当前页面导航菜单上的背景图片

我一直在研究这个jsFiddle作为我想要的例子。基本上，“li.current_page_item”上有一个背景图片。点击时我想围绕文本。当前页面导航菜单上的背景图片

的影像尺寸为146（宽）×44（H）

我虽然用起来有点困难，寻找一些帮助。我已将图形制作成一种尺寸，因为它看起来更简单。想知道是否有人可以帮助我。确保背景切换到每个活动项目，并显然防止列表项目跳过。

在此先感谢。

来源

2012-02-14 StuBlackett

有一点麻烦想象这尽管你的榜样。你可以把我可以看到的图像打倒吗？ – SpaceBeers 2012-02-14 13:16:28

当然，这里是：http://s14.postimage.org/6rnammggx/menu_example.png基本上，bg图片只适用于当前页面。 – StuBlackett 2012-02-14 13:23:42

我可以看到背景图像没有完全显示的两个原因。

首先是因为你在li标签，其是内嵌元素设置height和width（所以不能有一组height或width）。因此，您需要将其设置为block或inline-block元素。

第二个问题是，您将背景图像设置在嵌套在li.current_page_item中的锚标记上，该标记没有设置height或width。要解决这个问题，我只需将背景图像移动到li.current_page_item CSS上。

所以下面的CSS将工作：

.menu li.current_page_item { 
    background: url(http://i42.tinypic.com/2mnhvh0.png) no-repeat 0 0 transparent; 
} 

.menu li { 
    .... 
    display: inline-block; 
    *display: inline;  /* for IE7*/ 
    *zoom:1;    /* for IE7*/ 
    line-height: 44px; /* center text vertically */ 
    text-align: center; /* center text horizontally */ 
    .... 
}

工作例如：http://jsfiddle.net/9aUaK/2/

来源

2012-02-14 13:27:51

非常好。感谢那。管理得到它正常工作。非常感谢 – StuBlackett 2012-02-14 14:18:18

@StuBlackett没有问题 - 乐意帮忙 – 2012-02-14 14:25:23

当前页面导航菜单上的背景图片

回答

相关问题