我有以下代码:
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%。我怎样才能解决这个问题?