使用文本和圖像創建導航菜單

請問如何在底部創建一個像這樣的導航菜單？ https://m1.behance.net/rendition/modules/30754283/disp/e05f3faf8755b4c1892a7e9c66de7627.png 使用文本和圖像創建導航菜單

我已經有頁腳div集，我只需要菜單本身。我嘗試過並嘗試過，但無法完全按照我的意願顯示。圖像必須與CSS背景一起使用，以便在「選項卡」處於活動狀態時可以更改圖像。

非常感謝您提前！

來源

2014-11-05 andybadwool

顯示你的嘗試，它會更容易幫助你。 – TheFrozenOne 2014-11-05 11:37:04

謝謝，我添加了我的草稿。 – andybadwool 2014-11-05 11:43:59

我真的不覺得它有什麼必要與background-image屬性做到這一點。

您可以在此導航欄的HTML結構中使用正常的<img src="pics/my-img.png" />。對齊設置爲根本不算什麼的圖像會在大多數情況下，下降的圖片下同容器上的文字，但在例外的情況下：

#myNavigation img { 
    display: block; 
    padding-bottom: 4px; 
}

這會幫助你與我明白你的問題，你正在嘗試創建一個包含圖像和文本的導航菜單。

還有這個一個非常簡單和漂亮的懸停效果的可能性，爲e.g：

#myNavigation img { 
    opacity: 0.6; 
} 
#myNavigation img:hover { 
    opacity: 1; 
}

祝你好運！

來源

2014-11-05 11:44:02 ProDexorite

非常感謝您的輸入，我認爲我需要背景圖像的唯一原因就是因爲這樣，當它處於活動狀態時，我可以使其具有不同的顏色。（在示例鏈接中它變成了藍色而不是灰色） – andybadwool 2014-11-05 11:49:35

有沒有辦法做到這一點？再次感謝你:) – andybadwool 2014-11-05 12:01:29

在這種情況下，你應該使用背景圖像...你應該能夠通過調整文本的'padding-top：50px;'或者背景圖像的高度是什麼。然後你應該設置爲'background：url（img/my-image.png）top center no-repeat'，這樣你的背景就可以居中並且可以隨文本一起調整。 – ProDexorite 2014-11-05 12:49:43

使用文本和圖像創建導航菜單

回答

相關問題