尝试在我的Bootstrap Carousel图像/视频上获得深色覆盖

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="Image 1">
      <div class="carousel-caption d-none d-md-block overlay">
        <h5>标题1</h5>
        <p>描述1</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="Image 2">
      <div class="carousel-caption d-none d-md-block overlay">
        <h5>标题2</h5>
        <p>描述2</p>
      </div>
    </div>
    <!-- 更多carousel-item -->
  </div>
  <!-- 可以添加carousel-indicators和carousel-control按钮 -->
</div>

.carousel-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色覆盖层 */
  padding: 10px;
  border-radius: 5px;
}