當前頁面導航菜單上的背景圖片

我一直在研究這個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

當前頁面導航菜單上的背景圖片

回答

相關問題