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

您需要将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，{ {1}}，color-burn，hard-light，soft-light，difference，exclusion，hue，saturation和{{ 1}}。还有color

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，它可以进一步说明混合模式属性。

Bootstrap轮播标题的CSS混合模式

3 个答案: