如何使图像和顶部标题占据页面宽度的 100%？答案

【问题标题】：How do I make an image and top header take 100% of the width of the page?如何使图像和顶部标题占据页面宽度的 100%？
【发布时间】：2013-02-22 01:32:23
【问题描述】：

我有以下代码：

 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%。我怎样才能解决这个问题？

【问题讨论】：

标签： html css image position

【解决方案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>

【讨论】：