背景圖像不會顯示在導航欄中的鏈接上

我有一個房子的圖像，我想在導航欄上顯示爲「主頁」鏈接。我已經進入了一些CSS來實現這一點，但它似乎並沒有工作。任何人都可以幫我展示圖片嗎？請參閱下面的圖像和CSS代碼以進行說明。背景圖像不會顯示在導航欄中的鏈接上

enter image description here

淡藍色的框是白色的小房子應該是。請參閱下面的CSS

html, body 
{ 
padding:   0; 
margin-right:  auto; 
margin-left:  auto; 
} 

.navbar 
{ 
height:    48px; 
width:    100%; 
background-color: #294052; 
text-align:   center; 
vertical-align:  middle; 
margin-bottom:  10px; 
} 

li 
{ 
display:   inline; 
position:   relative; 
padding:   20px; 
border-right:  inset 2px white; 
font-size:   20px; 
font-weight:  normal; 
font-family:  sans-serif; 
vertical-align:  middle; 
padding-top:  31px; 
padding-bottom:  14px; 
} 

a 
{ 
text-decoration: none; 
color:    white; 
} 

li:hover 
{ 
text-decoration: underline; 
background-color: #447294; 
} 

li.home 
{ 
background-color: #447294; 
background-image: url('home.png'); 
} 

span 
{ 
font-weight:  bold; 
}

我使用display:block修復嘗試，但它只是打亂了我的導航欄的其餘部分。

和HTML代碼...

<div class="navbar"> 
<ul> 
    <a href="#"><li class="home"></li></a> 
    <a href="#"><li>ABOUT</li></a> 
    <a href="#"><li>CyMAL: MUSEUMS, ARCHIVES AND LIBRARIES</li></a> 
    <a href="#"><li>CONTACT</li></a> 
</ul> 

</div>

來源

2012-12-18 WebDevDanno

標記在哪裏？嘗試使用雙引號url（「home.png」）; - 假設文件home.png與css文件位於同一位置/文件夾中。 – Jawad

帶有更新，是您的css文件所在的相同位置/文件夾/目錄中的文件「home.png」？ – Jawad

ahhh是的謝謝你Jawad。我引用的是.html文件所在的URL，而不是.css。一個我不應該再犯的菜鳥錯誤！ – WebDevDanno

背景圖像爲li.home目前;但li.home不夠寬，無法顯示任何內容。背景圖像就像背景顏色 - 它們不會改變內容的形狀。

嘗試加入一些內容：

<li class="home">home</li>

或更改背景圖片的對齊center center或許看得更清楚。

來源

2012-12-18 17:53:45 KatieK

要開始調試，我第一次嘗試使用絕對URL，以確保圖像可以被加載。

li.home 
{ 
background-color: #447294; 
background-image: url('full_path_to_image/home.png'); 
}

另外，請提供HTML代碼，讓理想在http://jsfiddle.net/準備演示（或任何其他類似的服務）。這樣你就可以更好地幫助你。

編輯：添加HTML代碼後，問題似乎確實是圖像的路徑。

這裏是一個工作演示：http://jsfiddle.net/tBNSU/

來源

2012-12-18 17:38:08 finspin

啊!!!!!!!!!!! + 1 – Jawad

試過這個，它不能解決問題。：/將立即用HTML代碼編輯我的原始問題 – WebDevDanno

背景圖像不會顯示在導航欄中的鏈接上

回答

相關問題