如何将背景图片放在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.

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

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