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

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

Answer 1

从我从代码中收集到的内容，我认为这会有所帮助。 top，background和lower都是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>

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

1 个答案: