时间戳

首页 > 解决方案 > 如何将背景图片放在div后面

html - 如何将背景图片放在div后面

问题描述

我试图将我的背景放在包含 jumbotron 的 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>

标签： htmlcssbootstrap-4

解决方案

为了实现这一点，您需要告诉浏览器将img元素定位在您的 child 后面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>

推荐阅读