Bootstrap 轮播标题的 CSS 混合模式答案

【问题标题】：CSS blend mode for Bootstrap carousel captionBootstrap 轮播标题的 CSS 混合模式
【发布时间】：2015-04-09 20:09:39
【问题描述】：

我正在使用 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;
}

这是错误的方式吗？

【问题讨论】：

标签： css twitter-bootstrap carousel background-blend-mode

【解决方案1】：

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

它与 background-blend-mode 具有相同的语法，但这个仅适用于元素内背景（正如 M.Doye 所说）

【讨论】：

【解决方案2】：

您需要将background-image 属性分配给您分配background-blend-mode 的同一选择器。所以这可能不适用于您的情况。

From the Docs

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、@ 987654335@、exclusion、hue、saturation、color 和 luminosity。还有normal

Source

【讨论】：

好的，谢谢。不幸的是，这种方式不是引导滑块的工作方式:-(

【解决方案3】：

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

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

您可以查看一篇很棒的文章here，它对混合模式属性进行了进一步的解释。

【讨论】：