我试图在导航栏上叠加一个跨越页面宽度的透明框，然后叠加一个跨越整个页面高度的透明框。我可以插入水平条，但是当我这样做时，我无法在不降低所有其他内容的情况下将其从页面顶部降低。任何帮助将不胜感激。
<html>
<head>
<title>Welcome Home</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div id="topbar">
<div id="container">
<div id="header">
<div id="logo">
<a href="index.html"><img id="logo" src="images/WelcomeHomeLogo.png"> </a>
</div>
<ul class="toolbar">
<li id="left"><a href="lol.html"> About Us </a></li>
<li id="left"> <a href=""> Volunteer </a></li>
<li id="left"><a href=""> Donate </a></li>
<li id="left"><a href="lol.html"> Contact Us </a></li>
<li id="left"><a href="lol.html"> Blog </a></li>
<li id="right"><a href="lol.html"> Events </a></li>
</ul>
</div>
</div>
</div>
CSS:
body{
background-image:url("../images/thewood.jpeg");
background-size: cover;
}
#container{
background-color:#ffffff;
width: 69%;
margin-left: auto;
margin-right: auto;
opacity:0.7234;
filter:alpha(opacity=60);
height: 950px;
}
#topbar{
filter:alpha(opacity=60);
opacity:0.7234;
width: 100%;
background-color:#ffffff;
height:150px;
}
li{
float: left;
list-style: none;
display: inline;
color: black;
font-size: 170%;
padding-right:48px;
margin-top: 105px;
}
#logo{
float:left;
margin-top:40px;
padding-right:20px;
padding-left:8px;
}
ul{
display: inline;
}
#right{
float: right;
padding-left:none;
}
a:link {text-decoration:none;color:black;}
a:visited {text-decoration:none;color:black;}
a:hover {text-decoration:none;color: black;}
a:active (text-decoration:none;color:black;}
最佳答案
还有更优雅的方法，但这将使您到达需要的位置，而对当前设置的更改最少。
使#topbar 成为一个单独的元素(不是#container 的容器)，如下所示:
<div id="topbar"></div>
<div id="container">
<div id="header">
然后相应地调整#topbar 和#container 的边距CSS
#container {
background-color:#ffffff;
width: 69%;
margin-left: auto;
margin-right: auto;
opacity:0.7234;
filter:alpha(opacity=60);
height: 980px;
margin-top: -180px; /*Push back to top of page (height of #topbar + 30px)*/
}
#topbar {
filter:alpha(opacity=60);
opacity:0.7234;
width: 100%;
background-color:#ffffff;
height:150px;
margin-top: 30px; /*Move it down*/
}
关于HTML/CSS 覆盖透明框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20061446/