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>

我尝试将背景图像设置为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高于文本。

如何用图像完全覆盖div？

2 个答案: