html - 如何使图像和顶部页眉占据页面宽度的 100%？

Question

我有以下代码:

 HTML: 

 <header class="top">
 <h1>CHCF</h1>
 </header>
 <div class="img">
 <img src="/chcf/backdrop.jpg" class="backdrop">
 </div>
 <div class="lower">
 <h1>Hello</h1>
 </div>

 CSS: 

 body {
 }
 h1 {
 color: #FFFFFF;
 text-align: center;
 }
 .top {
 background-color: #000000;
 left: 0px;
 position: absolute;
 top: 0px;
 width: 100%;
 }
 .backdrop {
 left: 0px;
 margin-top: 77px;
 position: relative;
 width: 100%;
 }
 .lower {
 background-color: #FFFFFF;
 color: #000000;
 margin-top: -300px;
 opacity: 0.7;
 overflow: hidden;
 position: absolute;
 width: 100%;
 }

使用下面的代码我能够实现我想要的，即在图像顶部显示文本。但是，通过在 .backdrop 中使用 position:relative 可以使图像和顶部标题不会占据页面宽度的 100%。我怎样才能解决这个问题？

Answer 1

根据我从您的代码中收集到的信息，我认为这会有所帮助。顶部、背景和底部都是 100%，现在 .backdrop 可以是相对的

 body{
    padding:0px;
    margin:0px;
 }
 .background{
    position:absolute;
    width:100%;
 }
 .backdrop{
    width:100%;
 }
 .forground{
    z-index:3;
    position:absolute;
    width:100%;
 }
 .headerstuff{
    background-color:#ffffff;
 }
.top{
    width:100%;
}


 <div class="background">
 <img src="winter.jpg" class="backdrop">
 </div>

 <div class="forground">
     <header class="headerstuff top">
     <h1>CHCF</h1>
     </header>


     <div class="headerstuff lower">
     <h1>Hello</h1>
 </div>
 </div>