Bootstrap 5如何实现图片内部的文本定位效果

你之前用card-img-overlay没实现目标效果，核心问题有两个：

• 错误地将每个卡片单独包裹在独立的row容器中，无法实现参考图的对齐错落布局
• 直接对覆盖层使用垂直居中，没有控制内边距、文本位置、文本与底图的对比度，导致文本贴边、看不清、位置不对

1. 调整网格结构 #

把所有卡片放到同一个row容器内，通过栅格列宽控制尺寸：

• 顶部大卡片占6列宽度
• 下方3张小卡片各占2列宽度，自然和顶部大卡片的第二行对齐
• 统一用行间距类控制卡片间隙，不需要额外写样式调整间距

2. 优化覆盖层配置 #

card-img-overlay是Bootstrap官方提供的图片内嵌内容专用组件，方向是对的，补全几个配置即可：

• 给覆盖层加从底部向上的半透明黑色渐变，提升白色文本的可读性，避免浅色底图上白字看不清
• 给图片加object-fit: cover属性+统一高度，避免不同尺寸的图片拉伸变形、撑乱布局
• 把覆盖层的垂直对齐从居中改成底部对齐，通过内边距类控制文本和图片边缘的距离，匹配参考图的文本位置
• 按卡片尺寸调整文本字号，避免小卡片里文字溢出

3. 可直接使用的修正代码 #

替换原有代码即可运行：

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<style>
/* 底部渐变遮罩，保证文本可读性 */
.card .custom-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 60%);
}
/* 统一图片适配规则 */
.card-img {
  object-fit: cover;
}
/* 大卡片尺寸 */
.card-lg .card-img {
  height: 360px;
}
/* 小卡片尺寸 */
.card-sm .card-img {
  height: 176px;
}
</style>

<!-- 页面主体 -->
<div class="container py-4">
  <div class="row justify-content-center g-2">
    <!-- 顶部大卡片 -->
    <div class="col-6">
      <div class="card card-lg border-0">
        <img class="card-img rounded" src="./Assets/Blog/image 32.png" alt="城市风光">
        <div class="card-img-overlay custom-overlay text-white d-flex flex-column justify-content-end p-4 rounded">
          <h4 class="card-title mb-2">城市旅行目的地</h4>
          <p class="card-text mb-0">探索本地深度玩法</p>
        </div>
      </div>
    </div>
    <!-- 第一张小卡片 -->
    <div class="col-md-2 col-lg-2">
      <div class="card card-sm border-0">
        <img class="card-img rounded" src="./Assets/Blog/image 33.png" alt="短途旅行">
        <div class="card-img-overlay custom-overlay text-white d-flex flex-column justify-content-end p-3 rounded">
          <p class="card-text small mb-2">短途出行套餐</p>
          <div class="d-flex gap-2">
            <a href="#" class="card-link text-warning small">Read More</a>
            <a href="#" class="card-link text-warning small">Book a Trip</a>
          </div>
        </div>
      </div>
    </div>
    <!-- 第二张小卡片 -->
    <div class="col-md-2 col-lg-2">
      <div class="card card-sm border-0">
        <img class="card-img rounded" src="./Assets/Blog/image 34.png" alt="特色体验">
        <div class="card-img-overlay custom-overlay text-white d-flex flex-column justify-content-end p-3 rounded">
          <p class="card-text small mb-2">本地特色体验</p>
          <div class="d-flex gap-2">
            <a href="#" class="card-link text-warning small">Read More</a>
            <a href="#" class="card-link text-warning small">Book a Trip</a>
          </div>
        </div>
      </div>
    </div>
    <!-- 第三张小卡片 -->
    <div class="col-md-2 col-lg-2">
      <div class="card card-sm border-0">
        <img class="card-img rounded" src="./Assets/Blog/image 35.png" alt="城市介绍">
        <div class="card-img-overlay custom-overlay text-white d-flex flex-column justify-content-end p-3 rounded">
          <p class="card-text small mb-0">它是意大利人口第七多的城市，核心都会区约有一百万常住人口。</p>
        </div>
      </div>
    </div>
  </div>
</div>

如果需要调整文本位置，只需要修改card-img-overlay上的对齐类：

• 文本在底部：用justify-content-end
• 文本在中间：用justify-content-center
• 文本在顶部：用justify-content-start
• 文本靠左/居中/靠右：搭配align-items-start/align-items-center/align-items-end即可

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