0

我正在使用引导程序中的轮播组件，并且还想使用 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;
}

这是错误的方式吗？

4

3 回答 3

2

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

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

于 2015-04-10T21:01:13.277 回答
0

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

从文档

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

资源

于 2015-04-09T20:53:09.070 回答
0

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

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

您可以在此处查看一篇很棒的文章，该文章进一步解释了混合模式属性。

于 2018-04-11T08:04:36.417 回答