Html 将框定位在图像背景下

到目前为止，我得到了相应的图像和盒子。然而，我的问题是，当我去添加高度时，它会上升而不是下降

我的小提琴-

.post{
高度：255px；
字体大小：14px；
位置：相对位置；
填充物：5px；
保证金权利：3%；
利润率最高：3%；
}
1号包厢{
背景图像：url（“http://www.getmdl.io/templates/blog/images/coffee.jpg");
背景重复：无重复；
背景尺寸：封面；
}
.图像文本{
位置：绝对位置；
宽度：100%；
保证金：0；
左：0；
字体大小：粗体；
颜色：白色；
文本对齐：居中；
背景：黑色；
底部：0；
填充物：5px；
高度：40px；
}

陶器
Lorem Ipsum只是印刷的虚拟文本

如果我理解你的问题是正确的。您的.1号包厢未设置位置。必须设置父元素的位置才能对子元素产生正确的影响

.box-one {
position:relative;
}
.image-text {
position:absolute;
}

看看这里：

尝试将“高度”设为负值。那应该行得通，但我不能保证一定行得通。因此，不是：

height: 255px;

做

---

让我知道它是如何工作的！：）

对于已知高度，编辑

底部

值以匹配容器的

高度

.image-text {
    bottom: -40px;
    height: 40px;
}

.post{
高度：100px；
宽度：500px；
字体大小：14px；
位置：相对位置；
/*填充物：5px*/
/*保证金权利：3%*/
/*利润率最高：3%*/
}
1号包厢{
背景图像：url（“http://www.getmdl.io/templates/blog/images/coffee.jpg");
背景重复：无重复；
背景尺寸：封面；
/*轮廓：5px纯蓝色*/
}
.图像文本{
位置：绝对位置；
左：0；
底部：-40px；
宽度：100%；
保证金：0；
字体大小：粗体；
颜色：白色；
文本对齐：居中；
背景：黑色；
/*不透明度：.5*/
/*填充物：5px*/
高度：40px；
线高：40px；
}

陶器
Lorem Ipsum只是印刷和印刷的虚拟文本

哦，我不知道，负边距和变换有时会派上用场，但我不会在这方面影响高度。

.image-text {
    bottom: -40px;
    height: 40px;
}