引导程序转盘标题的CSS混合模式

Question

我正在使用引导程序中的carousel组件，还想使用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

如果要将一个元素混合到另一个元素上，则应该使用混合混合模式。

它的语法与背景混合模式相同，但这一模式仅适用于元素内背景（正如M.Doye所说）

Answer 2

您需要将background-image属性分配给与分配background-blend-mode相同的选择器。因此，这可能不适用于您的情况。

从文档

背景混合模式CSS属性描述元素的背景图像应该相互融合，元素的背景颜色。

语法示例：

.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 3

为了让代码正常工作，您需要向元素添加背景图像。所以你的代码应该是这样的：

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

这里有一篇很棒的文章，你可以看看，它对混合模式属性进行了进一步的解释。