將背景img添加到每個boostrap輪播專案

我正在嘗試為 boostrap carousel 上的每個專案添加不同的背景影像

這是我的 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 () -->
            <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;
}

我已經嘗試了一些我在類似問題的其他答案中找到的東西，但沒有一個對我有用。我想要的是每個單獨的專案都有一個背景影像，覆寫輪播的整個寬度和高度

誰能幫我？

先謝謝了！！

uj5u.com熱心網友回復：

<div class="carousel-item"> <!-- Individual carousel item -->
    <div class="container">
       <img src="..." alt="..." class="img-fluid"> <!-- Responsive Image -->
       <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>

您的代碼僅將影像添加到輪播專案中。

BootStrap 檔案中提供了完整的代碼。這是鏈接。

標籤：html css bootstrap-5

上一篇：如何在框中換行 更多

下一篇：如何在css網格列中居中專案？