0

次のコードがあります。

 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% を占有しなくなります。どうすればこれを修正できますか?

4

1 に答える 1

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>
于 2013-02-21T17:32:23.273 に答える