css - 当前页面导航菜单上的背景图像

Question

我一直在研究这个 jsFiddle作为我想要的例子。基本上“li.current_page_item”上面有一个背景图片。单击时我想包围文本。

图像尺寸为 146(宽)x 44(高)

不过我遇到了一点困难，正在寻求帮助。我已将图形设为同一种尺寸，因为这似乎是一种更简单的方法。

想知道是否有人可以帮助我。确保背景切换到每个事件元素并明显防止列表元素也跳转。

提前致谢。

Answer 1

我可以看出背景图片未完全显示的两个原因。

第一个是因为你在 li 标签上设置了 height 和 width，这是一个内联元素(所以不能设置高度或宽度)。因此，您需要将其设置为 block 或 inline-block 元素。

第二个是您在嵌套在 li.current_page_item 中的 anchor 标记上设置背景图片 - 它没有 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/