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

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>

- Wolfiebae

---

在 div 上设置 z-index 属性怎么样？ - bjbk

Answer 1

为了实现这一点，您需要告诉浏览器将img元素放在子div的后面。为此，您可以使用position属性，其中img具有较低的z-index。

只要元素上具有position属性，z-index就可以起作用：

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

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

- David

---

你绝对是对的，定位起了关键作用！非常感谢你。 - Wolfiebae

如果我的回答对您有帮助，请将其标记为“已接受的答案”。 - David

这里 z-index 不是必需的。只有当另一个具有 position: absolute 的元素重叠在第一个元素上时才需要它。 - John Mejia

@JohnMejia 兄弟，请阅读一些文档，这是一个好的开始 - https://medium.freecodecamp.org/z-index-explained-how-to-stack-elements-using-css-7c5aa0f179b3 - David

@Darthur 哈哈哈，你不明白啊，属性是在需要时使用的。这里我给你一个没有 z-index 的例子 https://jsfiddle.net/mnL8cvf2/2/ - John Mejia

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

这将在您的图像顶部提供居中的文本。

- Madison Courto

---

我想要在背景上方放置Jumbotron，但是z-index并不能解决这个问题。 - Wolfiebae

我编辑了我的回答，我认为这就是你想要实现的。 - Madison Courto

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>

- l3lue

Answer 4

在这种情况下，您需要首先设置具有position: relative;的父元素，然后添加以下CSS。

.container-fluid { position:relative }

然后您需要使用下一个样式设置jumbotron。

.jumbotron { position: absolute }

这样应该可以工作，你也可以移动.jumbotron的顶部、底部、左侧和右侧位置，例如：

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

这样，.jumbotron将在第一个position: relative;所占据的区域中移动。在这种情况下，是在.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/

希望这能帮到你。

- John Mejia

---

z-index在第一种情况下并不是必要的，只有当父元素有多个使用绝对定位的子元素或者有其他元素重叠在实际元素上时才需要。另一方面，我已经为他的简单问题提供了一个简单的解决方案。 - John Mejia