用圖像替換導航欄文字？

我目前正試圖找出最好的方式來替換我的當前導航欄菜單（即兼具懸停效果和下拉菜單）與圖像，而不是有文字作爲鏈接。我想要獲得與當前相同的效果，但隱藏文字並改爲使用圖像。用圖像替換導航欄文字？

2015-05-21 Lukon

只需使用''標籤插入圖像？你試過什麼了？ – Brian

作爲菜單鏈接的圖像對我而言似乎很老派......而且可能還有很差的SEO和可訪問性。 –

我試着做了一些事情：

etc等，但似乎沒有工作。 – Lukon

要使目前的案文，但不可見的，最簡單的方法是使用遵循兩個規則的相關規則：

text-indent: -1000em; 
overflow: hidden;

這將移動元素的邊界之外的文本在那裏將是不可見，只留下背景圖像。

2015-05-21 16:02:12

這不會也移動懸停和下拉菜單效果的邊界嗎？這裏的目標是讓新圖像能夠被覆蓋，並通過下拉菜單進行提示。 – Lukon

不，它只是縮進文字。 –

你的css真的很粗糙。你無論在哪裏都可以勝任所有事情並重復風格。我建議清理一切。但在此期間，在您的CSS中，請添加：

#cssmenu a { 
    text-indent: -9999px; 
}

2015-05-21 16:03:17

試過了，它似乎也隱藏了我的下拉菜單，縮小了主導航效果和下拉菜單大小的懸停空間。收縮只是因爲沒有文字來拉伸它或？ – Lukon

是的。你需要對css進行一些重寫，但最終這是你想要使用的。 –

回答