Bootstrap 5如何实现文字及按钮叠加显示在背景图片上方而非下方

• 现有代码同时给 .landingPageBack 容器设置了CSS背景图，又在容器内嵌套了<img>标签，重复引用图片导致文字内容默认排列在<img>元素下方
• 没有给文字容器设置定位规则，无法脱离正常文档流叠加在背景上方
• CSS选择器body html书写错误，缺少逗号分隔，且未设置根元素高度，导致背景图的min-height: 100%不生效

推荐方案修改代码 #

修改后HTML代码 #

<div class="container-fluid p-0">
   <div class="row landingPageBack position-relative m-0">
     <div class="text-center position-absolute top-50 start-50 translate-middle text-white">
        <h1>WELCOME</h1>
        <h2>write me a msg</h2>
        <a href="#" class="btn btn-primary btn-lg mt-3">CONTACT ME</a>  
     </div>
  </div>
</div>

修改后自定义CSS代码 #

/* BG IMAGE*/
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

.landingPageBack {
    background-image: url('img/Landing.jpg');
    min-height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

核心改动说明 #

• 移除了冗余的<img>标签，直接使用容器的CSS背景图实现背景效果
• 调用Bootstrap 5内置的定位工具类：给父容器加position-relative作为定位参照，给文字容器加position-absolute top-50 start-50 translate-middle实现完全居中，无需额外写自定义定位CSS
• 修正body html为body, html，新增height: 100%属性，保证背景图可以占满全屏
• 调整background-size为cover、新增background-position: center，保证背景图自适应不同屏幕尺寸不变形
• 给container加p-0、row加m-0，消除Bootstrap默认边距导致的页面白边
• 新增text-white和mt-3工具类，优化文字可读性和元素间距

保留img标签的兼容方案 #

如果业务要求必须保留页面内的<img>标签，可按如下规则调整：

• 给<img>添加Bootstrap类position-absolute top-0 start-0 w-100 h-100，自定义CSS加object-fit: cover; z-index: 0;
• 给文字容器添加position-relative z-index: 1即可实现叠加效果

内容的提问来源于stack exchange，提问作者Kikoanno