標題圖片不顯示相對位置時

我想用背景圖片製作標題並覆蓋頁面。所以這是我的代碼。標題圖片不顯示相對位置時

.header { 
 
     background: url('img/bg-01.png') center center; 
 
     position: relative; 
 
     min-height: 100%; 
 
     -webkit-background-size: cover; 
 
     -moz-background-size: cover; 
 
     -o-background-size: cover; 
 
     background-size: cover; 
 
    }

<header class="header" id="top"> 
 

 
</header> 
 
<div class="container text-center"> 
 
    <h3>Lorem Ipsum</h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
</div>

我使用CSS引導反正。但是，標題沒有顯示，當我將位置改爲絕對時，標題出現了。但標題後面的內容完全不顯示。如何解決它？

來源

2017-08-24 Anne

您無法看到標題的原因是因爲您使用了基於百分比的高度。嘗試在像素增加了高度，像這樣

.header { 
     background: url('http://placehold.it/400x400') center center; 
     position: relative; 
     min-height: 200px; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    }

如果你想使用一個基於百分比的高度，那麼你就需要確保的是，家長的高度也設置。在這種情況下，它將是body和html。如果你添加了這個，試圖使它適用於你，那麼不需要position: relative。

html, body { 
 
    height:100%; 
 
} 
 
.header { 
 
     background: url('http://placehold.it/500x500') center center; 
 
     position: relative; 
 
     min-height: 100%; 
 
     -webkit-background-size: cover; 
 
     -moz-background-size: cover; 
 
     -o-background-size: cover; 
 
     background-size: cover; 
 
    }

<header class="header" id="top"> 
 

 
</header> 
 
<div class="container text-center"> 
 
    <h3>Lorem Ipsum</h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
</div>

來源

2017-08-24 10:41:29 ProEvilz

太感謝你了！ – Anne

@安妮不客氣 - 當您可以通過按打勾圖標請接受這個答案。 – ProEvilz

您可以設置min-height到100vh。

header { 
 
     background: url('http://placehold.it/500') center center; 
 
     position: relative; 
 
     min-height: 100vh; 
 
     -webkit-background-size: cover; 
 
     -moz-background-size: cover; 
 
     -o-background-size: cover; 
 
     background-size: cover; 
 
    }

<header class="header" id="top"> 
 

 
</header> 
 
<div class="container text-center"> 
 
    <h3>Lorem Ipsum</h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
</div>

來源

2017-08-24 10:46:13 Gerard

給予高度頭，因爲DIV只與背景空的，所以你要添加的內容或增加高度的div

來源

2017-08-24 10:52:40 Gattbha

標題圖片不顯示相對位置時

回答

相關問題