card-img-overlay

bootstrap5.css

bootstrap5.css
.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  border-radius: calc(0.25rem - 1px);
}

html bootstrap5 Sample

カードの画像とテキストを重ね合わせる:card-img-overlay


...

カードのタイトル

カードの内容

  <div class="card">
    <img class="card-img" src="https://via.placeholder.com/960x450/FFFF00/000000?text=card-img" alt="...">
    <div class="card-img-overlay">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>