在Bootstrap 5的div中将Carousel显示为背景

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<div class="carousel-background">
  <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
    <!-- Carousel 内容 -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="image1.jpg" class="d-block w-100" alt="Image 1">
      </div>
      <div class="carousel-item">
        <img src="image2.jpg" class="d-block w-100" alt="Image 2">
      </div>
      <div class="carousel-item">
        <img src="image3.jpg" class="d-block w-100" alt="Image 3">
      </div>
    </div>
  </div>
  
  <div class="content">
    <!-- 内容部分 -->
    <h1>Welcome to my website</h1>
    <p>This is some content.</p>
  </div>
</div>

.carousel-background {
  position: relative;
}

.carousel-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 设置背景颜色和透明度 */
  z-index: -1; /* 将背景置于内容下方 */
}

.carousel {
  z-index: 0; /* 将Carousel置于背景上方 */
}

.content {
  position: relative;
  z-index: 1; /* 将内容置于背景上方 */
  color: #fff; /* 设置内容颜色 */
}