Bootstrap 旋转木马标题的 CSS 混合模式

Question

我正在使用 bootstrap 中的轮播组件，还想使用 CSS 混合模式 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

如果你想将一个元素混合在另一个元素之上，你应该使用的属性是 mix-blend-mode。

它和 background-blend-mode 有相同的语法，但是这个只适用于元素内背景(如 M.Doye 所说)