如何使用Bootstrap实现卡片覆盖卡片（图片覆盖层）效果？

没问题，我来帮你实现这个Card over Card with Image Overlay的效果！根据你描述的需求（主卡片带图片覆盖层，上方叠加一个小卡片），我们可以结合Bootstrap的内置组件和少量自定义CSS来完成，下面是具体的实现步骤和完整代码：

核心思路 #

主卡片使用相对定位作为容器，内部包含背景图片和半透明覆盖层；叠加的小卡片通过绝对定位固定在主卡片的指定位置（示例里放在右上角），利用Bootstrap的阴影类提升层次感。

完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card Over Card with Image Overlay</title>
  <!-- 引入Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* 自定义微调样式 */
    .main-card {
      position: relative;
      max-width: 600px;
      overflow: hidden;
    }
    /* 图片覆盖层的半透明背景 */
    .card-overlay-custom {
      background-color: rgba(0, 0, 0, 0.4);
    }
    /* 叠加卡片的定位与样式 */
    .overlay-card {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 180px;
      z-index: 10;
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <div class="main-card rounded-4 shadow">
      <!-- 主卡片背景图 -->
      <img src="https://picsum.photos/id/1035/600/400" class="card-img" alt="主卡片背景图">
      <!-- 主卡片图片覆盖层 -->
      <div class="card-img-overlay card-overlay-custom d-flex flex-column justify-content-end p-5">
        <h5 class="card-title text-white fw-bold">主卡片标题</h5>
        <p class="card-text text-white">这是主卡片的描述文本，位于图片覆盖层之上</p>
        <p class="card-text text-white"><small>最后更新 3分钟前</small></p>
      </div>
      <!-- 叠加在上方的小卡片 -->
      <div class="card overlay-card rounded-3 shadow-lg">
        <div class="card-body p-3">
          <h6 class="card-title mb-2">叠加卡片标题</h6>
          <p class="card-text small">这是叠加在主卡片上的小卡片内容，用来展示额外信息</p>
          <a href="#" class="btn btn-sm btn-primary mt-2">查看详情</a>
        </div>
      </div>
    </div>
  </div>

  <!-- 引入Bootstrap JS（可选，若需要交互组件） -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

代码关键点说明 #

• 主卡片容器：.main-card设置position: relative，为后续绝对定位的叠加卡片提供参考坐标系，overflow: hidden确保内容超出部分被裁剪，保持圆角效果。
• 图片覆盖层：使用Bootstrap的.card-img-overlay类，配合自定义的.card-overlay-custom设置半透明背景色，通过Flex布局让内容靠底部对齐。
• 叠加卡片：.overlay-card设置position: absolute，通过top和right属性调整位置，z-index: 10确保它在主卡片内容之上，shadow-lg增强立体感。
• 响应式适配：Bootstrap的容器和卡片类自带响应式特性，在小屏幕上会自动适配，你也可以根据需求调整叠加卡片的位置和尺寸。

你可以根据自己的需求修改图片地址、文本内容、颜色、位置等参数，完全匹配示例图的效果~

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