如何使用CSS/Bootstrap5将文本行列表置于背景图片上方？

你可以通过以下两种简单方法实现需求：

方法一：将图片设置为容器背景（推荐） #

把<img>标签替换为CSS背景图，行列元素作为容器子元素会自然显示在背景之上，同时还能保留跳转链接的功能：

修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
  <title>Testing</title>
  <!--CSS-->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  <!--Font Awesome-->
  <script src="https://kit.fontawesome.com/b5212ab333.js" crossorigin="anonymous"></script>
  <!--Index Stylesheet-->
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
  <style type="text/css">
    #about-us {
      background: url('https://via.placeholder.com/1920x618.png') no-repeat center center;
      background-size: cover;
      min-height: 618px; /* 和图片高度匹配，可按需调整 */
      position: relative;
    }
    /* 覆盖整个背景区域的跳转链接 */
    .bg-link {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    /* 确保内容显示在链接层之上 */
    .container-md {
      position: relative;
      z-index: 2;
      padding-top: 2rem; /* 调整内容与顶部的距离 */
    }
  </style>
</head>
<body>
    <div id="about-us">
        <a href="https://placeholder.com" class="bg-link"></a>
        <div class="container-md">
          <div class="row justify-content-center">
            <div class="col-4 about-text-header">
              One of two columns
            </div>
            <div class="col-4">
              One of two columns
            </div>
          </div>
        </div>
    </div>
</body>
</html>

方法二：使用绝对定位让行列容器覆盖图片 #

保留原有<img>标签，通过CSS定位让容器直接覆盖在图片上方：

只需在<style>标签中添加以下代码：

#about-us {
  position: relative;
}
#about-us .container-md {
  position: absolute;
  top: 50%; /* 垂直居中，可按需修改为具体数值 */
  left: 50%;
  transform: translate(-50%, -50%); /* 实现真正的居中 */
  z-index: 1;
}

调整top、left的数值可以改变内容在图片上的位置，添加padding或margin也能微调布局。

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