我目前正在编写一个基本网站的代码，以便在编写网站方面获得更多经验，但我遇到了一个问题:背景图像和导航栏。问题是，每次我在 HTML 代码中包含我的背景图片时，它都会干扰我的导航栏，要么完全删除它，要么将它移动到页面底部(我希望它位于顶部)。老实说，我不确定如何解决它。我包含了 HTML 和 CSS 代码，但没有包含背景代码。这是我目前拥有的背景 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>
最佳答案
问题出在您的 div 样式中的 position:absolute。如果删除它，您的图像将不会妨碍导航栏。此页面的正确代码是-
<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>
关于HTML 编码 : Fix to Background Image Interfering with Navigation Bar，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20116111/