html - 如何用图像完全覆盖 div？

Question

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

如果有帮助，我正在使用 bootstrap

<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>

我尝试为超大屏幕设置背景图片，但这会将图片放在其他所有内容的后面，而不是放在最上面。我尝试了一些其他的东西，但一切都弄乱了应该存在于覆盖图像下方的现有布局。

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;
}