我正在尝试为我的 Bootstrap 传送带上的每个项目添加不同的背景图像
下面是我HTML：

<!-- Start of carousel -->
    <div id="mainCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel"> <!-- Global carousel div -->
        <div class="carousel-indicators">  <!-- Bottom lines with the active marked out (class="active") -->
            <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>

        <div class="carousel-inner"> <!-- Div containing the carousel items -->
            <div class="carousel-item active"> <!-- Individual carousel item -->
                <div class="container">
                    <div class="carousel-caption text-start">
                        <h1>The leaders in...</h1>
                        <p>Fermentum netus tempor sed hendrerit sit est proin dictum duis! Luctus orci faucibus sagittis natoque metus libero conubia hendrerit!</p>
                        <p><a class="btn btn-lg btn-primary" href="#">See more</a></p>
                    </div>
                </div>
            </div>

            <div class="carousel-item"> <!-- Individual carousel item -->
                <div class="container"> 
                    <div class="carousel-caption">
                        <h1>Our journey</h1>
                        <p>Consequat pharetra porttitor et etiam condimentum amet. Metus fermentum eget porta ultrices magna convallis.</p>
                        <p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
                    </div>
                </div>
            </div>

            <div class="carousel-item"> <!-- Individual carousel item -->
                <div class="container">
                    <div class="carousel-caption text-end">
                        <h1>See our offers</h1>
                        <p>Sapien bibendum dictum dis phasellus nullam nunc nibh lobortis. </p>
                        <p><a class="btn btn-lg btn-primary" href="#">Browse offers</a></p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Button to previous item -->
        <button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>

        <!-- Button to next item -->
        <button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
    <!-- End of carousel -->

这是我的CSS：

.container{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 50px;
}

.carousel-item{
    height: 32rem;
    /*background-color: #777;*/
    color: white;
    position: relative;
}

我已经尝试了一些方法，在类似问题的其他答案中找到了一些方法，但没有一个对我有效。我所希望的是每个单独的项目都有一个覆盖整个旋转木马宽度和高度的背景图像
有人能帮帮我吗？
提前谢谢你!!