如何使用 CSS 和 HTML 將 Bootstrap 卡片(card)的背景圖片填滿的程式碼:

HTML:

 <div class="card bg-image">
  <div class="card-body">
    <h5 class="card-title">卡片標題</h5>
    <p class="card-text">這裡是卡片內容。</p>
  </div>
</div>

CSS:

.bg-image {
  background-image: url("圖片網址");
  background-size: cover;
  background-position: center;
}

你需要將 url("圖片網址") 替換為你想要使用的圖片的網址。使用 background-size: cover; 可以讓圖片填滿整個卡片,而 background-position: center; 可以讓圖片保持在卡片中央。 如果你想讓卡片有更多樣化的背景圖片,你可以使用 Bootstrap 提供的內置類別,例如 .bg-primary 或 .bg-success。該類別可以將卡片的背景顏色設定為 Bootstrap 的預設顏色,並將其應用於卡片的背景圖片上。 希望對你有所幫助!

嗨 朋友,我是程式設計師;專職網路網站開發與行銷設計執行,目前也有自己的事業。