所以我有一个包含内容的 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>
我尝试为超大屏幕设置背景图片,但这会将图片放在其他所有内容的后面,而不是放在最上面。我尝试了一些其他的东西,但一切都弄乱了应该存在于覆盖图像下方的现有布局。
最佳答案
You could position the image absolutely to cover the text.
.jumbotron{
position: relative;
}
.jumbotron img{
position: absolute;
}
.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;
}
关于html - 如何用图像完全覆盖 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24785123/