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

Question

我試圖將我的背景放在包含巨無霸的div后面，但div始終保持在背景圖像以下，而不是出現在背景圖像上。 我該如何解決？

PS：出於某些原因，我不想將背景圖像放在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的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> 

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將在以下位置移動： 采取。 在這種情況下，容器流體類別為。

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

希望這可以幫到你。