CSS режим смешивания для заголовка карусели Bootstrap

Question

Я использую карусельный компонент из начальной загрузки, а также хочу использовать CSS blend-mode background-blend-mode: multiply; для подписи.

К сожалению, режим наложения не работает.

Код следующий:

<div class="carousel-inner" role="listbox">
    <div class="item">
        <div class="carousel-caption">
            CAPTION CONTENT
        </div>
        <img src="imgage.png" class="img-responsive" />
     </div>
</div>

CSS является следующим:

.carousel-caption {
    background-color: rgba(0, 119, 137, 0.7); 
    background-blend-mode: multiply;
}

Это неправильный путь?

Answer 1

Вам нужно будет назначить background-image свойство того же селектора, который вы назначаете background-blend-mode, Так что это может не сработать в вашем случае.

Из документов

CSS-свойство background-blend-mode описывает, как фоновые изображения элемента должны сочетаться друг с другом и цветом фона элемента.

Пример синтаксиса:

.blended {
  background-image: url(face.jpg);
  background-color: red;
  background-blend-mode: multiply;
}

---

Вместе сmultiplyВы также можете использовать:screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, а также luminosity, А также normal

Источник

Answer 2

Если вы хотите смешать один элемент с другим, вам следует использовать свойство mix-blend-mode.

Он имеет тот же синтаксис, что и background-blend-mode, но этот применяется только к фонам в элементах (как говорит М.Дой)

Answer 3

Чтобы ваш код работал, вам нужно добавить фоновое изображение для элемента. Итак, ваш код должен выглядеть так:

.carousel-caption {
   background-image: url('image.png');
   background-color: rgba(0, 119, 137, 0.7); 
   background-blend-mode: multiply;
}

Здесь вы можете ознакомиться с отличной статьей, в которой дается дальнейшее объяснение свойства режима наложения.