Карусель Bootstrap 4

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>

Можете ли вы предоставить больше кода, чтобы мы знали, с чем вы работаете? Немного HTML?

— 09.07.2019 14:41

@RoofLee Было бы здорово увидеть HTML и CSS, чтобы пользователи могли вам помочь. Пожалуйста, не могли бы вы включить фрагмент кода HTML.

— 09.07.2019 14:43

@brooksrelyt нет проблем

— 09.07.2019 14:44

Где вы сказали: «Я пытался поместить это в элемент карусели и внутреннюю часть карусели», можем ли мы увидеть CSS, на который это ссылается?

— 09.07.2019 14:54

@metaDesign Я просто поставил background-image: linear-gradient(to top, black 0%, transparent 100%); в их классах и не более..

— 09.07.2019 15:15

@RoofLee Если бы это не имело эффекта, я бы предположил, что либо CSS недействителен, либо hmtl не подключается к CSS. Вот почему я хотел увидеть ваш CSS.

— 09.07.2019 15:18

@metaDesign CSS связан с HTML и отлично работает со всеми остальными. Клянусь.

— 09.07.2019 15:21

css bootstrap-4

09.07.2019 14:38

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

157

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Спасибо, но теперь у меня другая проблема. Элемент с классом carousel-caption теперь находится под градиентом на слайде :(

— 09.07.2019 15:51

09.07.2019 15:31