用于引导旋转木马标题的CSS混合模式
用于引导旋转木马标题的CSS混合模式
提问于 2015-04-09 20:09:39
我正在使用引导程序中的旋转木马组件，并且也希望使用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;
}这条路不对吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-04-09 20:53:09
您需要将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
Stack Overflow用户
发布于 2015-04-10 21:01:13
如果您想将一个元素与另一个元素混合，则应该使用的属性是混合混合模式。
它具有与背景混合模式相同的语法，但这个语法只适用于元素内的背景(正如M.Doye所说)。
Stack Overflow用户
发布于 2018-04-11 08:04:36
为了使代码工作，需要向元素添加一个背景图像。所以您的代码应该如下所示：
.carousel-caption {
background-image: url('image.png');
background-color: rgba(0, 119, 137, 0.7);
background-blend-mode: multiply;
}您可以查看一篇很棒的文章这里，它进一步解释了混合模式属性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29548012
复制相关文章
相似问题
腾讯云开发者
