html - 当位置是相对的时，标题图像不显示

Question

我想制作一个带有背景图片的页眉并覆盖整个页面。所以这是我的代码。

.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>

无论如何我都在使用 bootstrap css。但是，标题没有显示，当我将位置更改为绝对位置时，标题出现了。但是标题后面的内容根本不显示。如何解决？

Answer 1

您看不到标题的原因是您使用了基于百分比的高度。尝试像这样添加以像素为单位的高度

.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>