如何製作圖片和頂部標題佔頁面寬度的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％，現在.backback可以是相對的

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>