Question

所以，在我的HTML中，我放了一个响应的图像（当浏览器窗口改变时改变大小）。现在，在它的顶部，我想要我的标题（或者你可以说文字）。但是图像只是作为条带出现。当您将窗口重新调整为非常小时，它会显示为一个整体。当我将文本的位置更改为绝对位置相对的图像时，一切都消失了。

这是我的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>

这是小提琴：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/

文本绝对定位但隐藏在其下方的相对图像

1 个答案: