圖像填充整個div而不是隻填充標題下方的空間

Question

我試圖用圖像填充容器中標題下方的空間。問題在於圖像用圖像填充整個容器，而不是到達標題位置並停止。

這裏是我的代碼：

.container { 
 
    height: 100vh; 
 
} 
 

 
.showcase { 
 
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/innovative_background.jpeg); 
 
    background-position: center; 
 
    background-size: cover; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-size: cover; 
 
} 
 

 
header { 
 
    background: rgba(255, 255, 255, 0); 
 
    min-height: 65px; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    z-index: 20; 
 
    transition: 0.35s all ease; 
 
    border-bottom: solid #cb5057; 
 
}

<div class="container"> 
 
    <header> 
 
    <ul> 
 
     <li>link1</li> 
 
     <li>Link 2</li> 
 
     <li>Link 3</li> 
 
     <li>Contact Us</li> 
 
    </ul> 
 
    </header> 
 
    <div class="showcase"></div> 
 
</div>

我只是想圖像填充剩餘股利最多的頭元素。如果您有任何提示或解決方案，請告訴我。

謝謝！

Answer 1

由於您的標題已修復，因此以下內容需要填充頂部或頁邊空白，其值與標題高度相同。

檢查下面的代碼

.container 
 
{ 
 
    height: 100vh; 
 
} 
 

 
.showcase { 
 
    background: linear-gradient(
 
     rgba(0, 0, 0, 0.6), 
 
     rgba(0, 0, 0, 0.6)), 
 
    url(../img/innovative_background.jpeg); 
 
    background-position: center; 
 
    background-size: cover; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-size: cover; 
 
} 
 

 
header { 
 
    background: rgba(255, 255, 255, 0); 
 
    min-height: 65px; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    z-index: 20; 
 
    transition: 0.35s all ease; 
 
    border-bottom: solid #cb5057; 
 
    background: white; 
 
} 
 

 
.showcase img { 
 
    padding-top: 100px; 
 
    width: 100%; 
 
}

<div class="container"> 
 
      <header> 
 
       <ul> 
 
        <li>link1</li> 
 
        <li>Link 2</li> 
 
        <li>Link 3</li> 
 
        <li>Contact Us</li> 
 
       </ul> 
 
      </header> 
 
    <div class="showcase"> 
 
     <img src="http://www.fillmurray.com/1200/1200" alt=""> 
 
    </div> 
 
</div>

Answer 2

只是適用background: #fff（或任何顏色你喜歡）你header，否則它是透明的，而且因爲它是固定的，你會看到.showcase下面的背景圖片

.container { 
 
    height: 100vh; 
 
} 
 

 
.showcase { 
 
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(http://placehold.it/500x800/0af); 
 
    background-position: center; 
 
    background-size: cover; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-size: cover; 
 
} 
 

 
header { 
 
    background: rgba(255, 255, 255, 0); 
 
    min-height: 65px; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    z-index: 20; 
 
    transition: 0.35s all ease; 
 
    border-bottom: solid #cb5057; 
 
    background: #fff; 
 
}

<div class="container"> 
 
    <header> 
 
    <ul> 
 
     <li>link1</li> 
 
     <li>Link 2</li> 
 
     <li>Link 3</li> 
 
     <li>Contact Us</li> 
 
    </ul> 
 
    </header> 
 
    <div class="showcase"></div> 
 
</div>