Карусель Bootstrap 4

Question

background-image: linear-gradient(to top, black 0%, transparent 100%);

Как добавить этот градиент к bootstrap 4 карусели?

Я пытался поместить его в carousel-item и carousel-inner.Не влияет.

Вот так выглядит моя карусель bs4

<div id="gallery" class="carousel slide" data-ride="carousel" style="margin-top: 6rem;">
    <ol class="carousel-indicators">
        <li data-target="#gallery" data-slide-to="0" class="active"></li>
        <li data-target="#gallery" data-slide-to="1"></li>
        <li data-target="#gallery" data-slide-to="2"></li>
        <li data-target="#gallery" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="img/gallery1.jpg" class="d-block w-100 gallery-img" alt="ВИГВАМ">
                <div class="carousel-caption">
                    <h5>item0</h5>
                    <p>desc</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="img/gallery8.jpg" class="d-block w-100 gallery-img" alt="item">
                <div class="carousel-caption">
                    <h5>item1</h5>
                    <p>desc</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="img/gallery2.jpg" class="d-block w-100 gallery-img" alt="item">
                <div class="carousel-caption">
                    <h5>item2</h5>
                    <p>desc</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="img/gallery3.jpg" class="d-block w-100 gallery-img" alt="item">
                <div class="carousel-caption">
                    <h5>item3</h5>
                    <p>desc</p>
                </div>
            </div>
        <a class="carousel-control-prev" href="#gallery" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">prev</span>
        </a>
        <a class="carousel-control-next" href="#gallery" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">next</span>
        </a>
    </div>
</div>

Answer 1

.carousel::after {
  background-image: linear-gradient(to top, black 0%, transparent 100%);
  bottom: 0;
  content: "";
  height: 100px;
  left: 0;
  position: absolute;
  right: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="gallery" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#gallery" data-slide-to="0" class="active"></li>
    <li data-target="#gallery" data-slide-to="1"></li>
    <li data-target="#gallery" data-slide-to="2"></li>
    <li data-target="#gallery" data-slide-to="3"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://www.chancerides.com/wp-content/uploads/2017/03/cr_detail_36ft_carrousel.jpg" class="d-block w-100 gallery-img" alt="ВИГВАМ">
      <div class="carousel-caption">
        <h5>item0</h5>
        <p>desc</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://www.chancerides.com/wp-content/uploads/2017/03/cr_detail_36ftdd_carrousel.jpg" class="d-block w-100 gallery-img" alt="item">
      <div class="carousel-caption">
        <h5>item1</h5>
        <p>desc</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://www.guernseys.com/v2/images/Carousel/700x400_1.jpg" class="d-block w-100 gallery-img" alt="item">
      <div class="carousel-caption">
        <h5>item2</h5>
        <p>desc</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://www.chancerides.com/wp-content/uploads/2017/09/carrousel_gallery_2.jpg" class="d-block w-100 gallery-img" alt="item">
      <div class="carousel-caption">
        <h5>item3</h5>
        <p>desc</p>
      </div>
    </div>
    <a class="carousel-control-prev" href="#gallery" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">prev</span>
    </a>
    <a class="carousel-control-next" href="#gallery" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">next</span>
    </a>
  </div>
</div>