Question

我试图将背景放置在包含巨无霸的div后面，但div始终保持在背景图像下方，而不是出现在背景图像上。我该如何解决？

P.S：由于某些原因，我不想将背景图像放入CSS文件中，因此我希望图像src仅出现在HTML中。非常感谢！

这是我的代码：

        <div class="container-fluid" >
         <img src='U_Thant_PIC_3.jpg'
            width='1400px' height='800px'/>

            <div class="jumbotron jumbotron-fluid">
                <center>
                    <h2 class="a">Cats are cool</h2>
                </center>

            </div>
</div>

Answer 1

要实现此目的，您需要告诉浏览器将img元素放在孩子div的后面。为此，您可以使用position属性，而img的{{1}}较低。

只要您在元素上具有z-index个属性，z-index就可以做到这一点：

position

div.container-fluid{position:relative;}
div.container-fluid img{position:absolute;top:0;left:0;z-index:1}
div.container-fluid div.jumbotron{position:relative;z-index:5;color:white;}

Answer 2

尝试一下；

HTML

 <div class="container-fluid">
  <img src="U_Thant_PIC_3.jpg" alt="Snow" width='1400px' height='800px'>
  <div class="jumbotron jumbotron-fluid">
      <h2 class="a">Cats are cool
  </div>
</div>

CSS

.jumbotron {
    position: absolute;
    left: 50%;
}

它将使您在图片上方居中显示文字。

Answer 3

将position: absolute;添加到class="jumbotron jumbotron-fluid"中，然后将<img src='U_Thant_PIC_3.jpg' width='1400px' height='800px'/>移动到代码底部。

.box {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
}
.jumbotron {
  color: white;
  position: absolute;
}

<div class="box">
  <div class="jumbotron">
    textbox
  </div>
  <img src="https://www.w3schools.com/css/img_lights.jpg">
</div>

Answer 4

您首先需要设置位置为：relative;的父元素。在这种情况下，您应该在下面添加css。

.container-fluid { position:relative }

然后需要设置下一种样式的巨型飞船。

.jumbotron { position: absolute }

这应该可行，也可以将.jumbotron移到顶部，底部，左侧和右侧的位置，例如：

.jumbotron { position: absolute; top: 20px; left: 10px; }

这样，.jumbotron将在以下位置移动：采取。在这种情况下，位于.container-fluid类。

<div class="container-fluid" >
    <img src='https://www.w3schools.com/css/img_lights.jpg'
            width='1400px' height='800px'/>

    <div class="jumbotron jumbotron-fluid">
      <center>
         <h2 class="a">Cats are cool</h2>
      </center>

   </div>
</div>

在这里我给你举个例子： https://jsfiddle.net/mnL8cvf2/2/

希望这可以为您提供帮助。

如何在div后面放置背景图片

4 个答案: