Question

我正在尝试覆盖横跨导航栏页面宽度的透明框，然后覆盖整个页面高度的透明框。我可以进入水平条，但是当我这样做时，我不能从页面顶部降低它而不降低所有其他内容。任何帮助将不胜感激。

<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;}

Answer 1

还有更优雅的方式，但只需对您当前的设置进行最小的更改，就可以达到您需要的位置。

使#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覆盖透明框

1 个答案: