CSS Bootstrap 轮播字幕的混合模式

Question

我正在使用 bootstrap 的轮播组件，并且还想使用 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 的同一选择器。所以这可能不适用于您的情况。

From the Docs

The background-blend-mode CSS property describes how the element's background images should blend with each other and the element's background color.

语法示例：

.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

Source

Answer 2

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

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

Answer 3

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

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

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

CSS Bootstrap 轮播字幕的混合模式

CSS blend mode for Bootstrap carousel caption

css

carousel

twitter-bootstrap

background-blend-mode