HTML編碼：修復背景圖像干擾導航欄

我目前正在編寫一個基本的網站，以便在編碼網站上有更多的經驗，但我遇到了一個問題：背景圖像和導航欄。問題是，每當我在HTML代碼中包含我的背景圖像時，它都會干擾我的導航欄，或者將其完全移除或將其移動到頁面底部（我希望它位於頂部）。我真的不知道如何解決它。我已經包含了HTML和CSS代碼，但我沒有包含背景代碼。這是我目前擁有的背景HTML代碼。謝謝。HTML編碼：修復背景圖像干擾導航欄

<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'> 
<img src='Unknown.png' style='width:100%;height:100%'/>

這裏的實際

HTML + CSS

<html> 
<div id="menu"> 
<ul> 
<li><a href="index.html">HOME</a></li> 
<ul><li><a href="aboutus".html">ABOUT US</a></li> 
<li><a href="siteupdates.html">SITE UPDATES</a></li> 
<li><a href="contactus.html">CONTACT US</a></li> 
</ul> 
</div> 
<html> 
<head> 
<style type="text/css"> 
#menu { 
    width: autopx; 
    height: autopx; 
    font-size: 16px; 
    font-family: Tahoma, Geneva, sans-serif; 
    font-weight: bold; 
    text-align: center; 
    text-shadow: 3px 2px 3px #333333; 
    background-color: #8AD9FF; 
     border-radius: 8px; 
} 
#menu ul { 
    height: auto; 
    padding: 8px 0px; 
    margin: 0px; 
    display: inline; 
} 
#menu li { 
display: inline; 
padding: 20px; 
} 
#menu a { 
    text-decoration: none; 
    color: #00F; 
    padding: 8px 8px 8px 8px; 
} 
#menu a:hover { 
    color: #F90; 
    background-color: #FFF; 
} 
</style> 
</head> 
<body> 
</body> 
</html>

來源

2013-11-21 user3016643

問題是在你的div風格的絕對位置。如果刪除該圖片，圖片將不會妨礙導航欄。此頁面的正確代碼將爲 -

<html> 
<head> 
<style type="text/css"> 
#menu { 
    width: auto; 
    height: auto; 
    font-size: 16px; 
    font-family: Tahoma, Geneva, sans-serif; 
    font-weight: bold; 
    text-align: center; 
    text-shadow: 3px 2px 3px #333333; 
    background-color: #8AD9FF; 
    border-radius: 8px; 
} 
#menu ul { 
    height: auto; 
    padding: 8px 0px; 
    margin: 0px; 
    display: inline; 
} 
#menu li { 
display: inline; 
padding: 20px; 
} 
#menu a { 
    text-decoration: none; 
    color: #00F; 
    padding: 8px 8px 8px 8px; 
} 
#menu a:hover { 
    color: #F90; 
    background-color: #FFF; 
} 
</style> 
</head> 
<body> 
<div id="menu"> 
<ul> 
<li><a href="index.html">HOME</a></li> 
<li><a href="aboutus.html">ABOUT US</a></li> 
<li><a href="siteupdates.html">SITE UPDATES</a></li> 
<li><a href="contactus.html">CONTACT US</a></li> 
</ul> 
</div> 
<div style="z-index:0;left:0;top:0;width:100%;height:100%"> 
<img src="Unknown.png" style='width:100%;height:100%'/> 
</div> 

</body> 
</html>

來源

2013-11-21 10:52:49 rmunshi

有一些問題與您的代碼。首先一個HTML文檔中的所有正常結構是：

<html> 
    <head> 
     <!-- META TAGS, IMPORTS, TITLE --> 
    </head> 
    <body> 
     <!-- CONTENT --> 
    </body> 
</html>

這意味着你只能夠將導航DIV與主體部分ID menu。現在給你的身體一個背景圖片不要使用單獨的元素img。只需將圖像作爲CSS背景屬性添加到body即可。你可以找到一個介紹here。

來源

2013-11-21 08:53:56 Baschi

身體標記正確添加到您的HTML格式像這樣：

<html> 
    <head> 
     //Title metatags etc here 
    </head> 
    <body> 
     //Your pages content 
    </body> 
</html>

，然後設置你的bachground無論是通過身體的CSS：

body { 
background-image: url(relativepath to your image here); 
}

或內聯這樣的：

<body background-image="relative path here">

來源

2013-11-21 08:58:07 Igle

HTML編碼：修復背景圖像干擾導航欄

回答

相關問題