如何用图像完全覆盖 div？

Question

所以我有一个 div，里面有内容，但我想用一个位于其他所有内容之上的图像完全覆盖该内容。

如果有帮助，我正在使用引导程序

<div class="jumbotron">
  <div> I have images and paragraphs inside of me </div>
  <div> I have images and paragraphs inside of me </div>
  <div class="clearfix"></div>
</div>

我尝试为 jumbotron 设置背景图像，但这会将图像放在其他所有内容的后面，而不是在顶部。我尝试了其他一些方法，但一切都搞乱了应该存在于覆盖图像下方的现有布局。

Answer 1

You could position the image absolutely to cover the text.

.jumbotron{
    position: relative;
}
.jumbotron img{
    position: absolute;
}

You could also use a background image in this situation as well if your text is way too large. This is kind of goofy but the requirements here are kind of goofy:

.jumbotron {
    position: relative;
    height: 100%;
    width: 100%;
}
.jumbotron img {
    position: absolute;
}
.jumbotron .covering{
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url('http://lorempixel.com/400/200/');
    background-size: cover;
}

Answer 2

您可以为图像和文本设置相同的 CSS 定位和大小规则，并使图像的 z-index 高于文本。