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

所以，在我的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>

.大标题{
位置：相对位置；
宽度：100%；
背景：#333；
溢出：隐藏；
背景尺寸：封面；
背景位置：中心；
z指数：1；
}
.candh_容器。大收割台{
背景图像：url（'http://i.imgur.com/vkfDo1I.jpg');
}
.主标题{
/*位置：绝对位置*/
保证金：0；
填充：0；
颜色：#000000；
文本对齐：居中；
右边距：自动；
左边距：自动；
}
.container_candh.主标题{
文本转换：大写；
字体大小：4.2米；
字体系列：蒙特塞拉特；
}
坎德公司。

---

问题是，你使用了你的图像作为背景，所以它不会占用任何空间。您必须将图像本身缩放为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>

.bg_图像{
宽度：100%；
}
.Candhu集装箱{
位置：相对位置；
}
.主标题{
位置：绝对位置；
颜色：#000000；
文本对齐：居中；
右边距：自动；
左边距：自动；
z指数：1；
宽度：100%；
顶部：0px；
}
坎德公司。

---

勾选此项：

那么您想显示缩放到全宽的整个图像吗？但是，如果用户在移动设备上怎么办？如果我们缩小窗口，图像就会变短！如何将图像粘贴到底部，然后重新调整大小？您可以为图像指定

min height

，请参见fiddle:谢谢您的帮助，我想问最后一个问题。当我创建一个新的div时，比如说一个矩形，为什么图像和矩形之间有空格，我能做些什么来解决它？再次感谢！问题是，h1标记有一个边距（将其设置为0），您必须将图像的显示设置为块，因为默认值（内联）也会向该边距添加边距。请参见fiddle:jsfiddle.net/ysksx5nu/4hey，因此我一直在进行实验，看起来我再次陷入困境：P这是fiddle，因此，如果您看到全屏结果，并重新调整窗口大小，您将看到图像本身没有居中，只是停留在正确的位置！我能做点什么使塔始终在中心吗？谢谢