html - 文本是绝对定位的，但隐藏了它下面的相对图像

Question

因此，在我的 HTML 中，我放置了一个响应式图像(在浏览器窗口更改时更改大小)。现在，在它的顶部，我想写上我的标题(或者你可以说文字)。但图像仅显示为 strip 。当您将窗口调整为非常小时，它会作为一个整体显示。当我将文本的位置更改为相对图像的绝对位置时，一切都消失了。

这是我的 HTML:

<style>
.large-header {
    position: relative;
    width: 100%;
    background: #333;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    z-index: 1;
}

.candh_container .large-header {
    background-image:url('http://i.imgur.com/vkfDo1I.jpg');
}

.main-title {
    /* position: absolute; */
    margin: 0;
    padding: 0;
    color: #000000;
    text-align: center;
    margin-right:auto;
    margin-left:auto;

}

.container_candh .main-title {
    text-transform: uppercase;
    font-size: 4.2em;
    font-family:Montserrat;

}
</style>

<div class="candh_container">
    <div class="large-header">
         <h1 class="main-title">Candh Inc.</h1>
    </div>
</div>

这是 fiddle :http://jsfiddle.net/ysksx5nu/

Answer 1

问题是，您使用图像作为背景，因此不会占用任何空间。您必须将图像本身缩放到 100% 宽度，并且不指定高度，以便保持比例。

<style>
.bg_image {
    width: 100%;
}

.candh_container {
    position: relative;
}

.main_title {
    position: absolute;
    color: #000000;
    text-align: center;
    margin-right:auto;
    margin-left:auto;
    z-index: 1;
    width: 100%;
    top: 0px;
}
</style>

<div class="candh_container">
    <img src="http://i.imgur.com/vkfDo1I.jpg" class="bg_image" />
    <h1 class="main_title">Candh Inc.</h1>
</div>

检查这个:http://jsfiddle.net/ysksx5nu/1/