用于引导旋转木马标题的CSS混合模式

我使用的是来自bootstrap的carousel组件，还想使用CSS混合模式

背景混合模式：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>

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

这是错误的方法吗？
您需要将
背景图像
属性指定给指定
背景混合模式
的同一选择器。所以这在你的情况下可能不起作用


背景混合模式CSS属性描述元素的
背景图像应相互混合，并与元素的
背景色

语法示例：

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


除了倍增，你还可以使用：
屏幕
，
叠加
，
变暗
，
变亮
，
色彩减淡
，
色彩燃烧
，
强光
，
差异
，
排除
，
色调
，
饱和度
，
颜色
和
亮度
。以及
normal

如果要将一个元素与另一个元素混合，则应使用混合模式属性

它的语法与背景混合模式相同，但这一语法仅适用于元素内背景（正如M.Doye所说）
为了让代码正常工作，您需要向元素添加背景图像。因此，您的代码应该如下所示：

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

您可以查看一篇很棒的文章，它进一步解释了混合模式属性。
好的，谢谢。不幸的是，这种方式不是引导滑块的工作方式：-(