blocks|key|1257930|text|您需要将background-image属性分配给与分配background-blend-mode相同的选择器。所以这在你的情况下可能行不通。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1257931|从医生那里|1257932|背景混合模式CSS属性描述元素的背景图像应该如何相互混合和元素的背景色。|blockquote|1257933|语法示例：|BOLD|1257934|.blended+{
++background-image:+url(face.jpg);
++background-color:+red;
++background-blend-mode:+multiply;
}|code-block|syntax|javascript|1257935|​|1257936|除了multiply之外，您还可以使用：screen、overlay、darken、lighten、color-dodge、color-burn、hard-light、soft-light、difference、exclusion、hue、saturation、color和luminosity。还有normal|1257937|1257938|https://css-tricks.com/basics-css-blend-modes/|1257939|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode|1^0|4|G|S|L|0|0|5|0|0|0|0|5|0|0|0|2|8|2|8|K|6|R|7|Z|6|16|7|1E|B|1Q|A|21|A|2C|A|2N|A|2Y|9|38|3|3C|A|3N|5|3T|A|46|6|0|0|0|1A|1|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|H|3|I|5|J|7|1H|8|@]|D|@]|E|$]]|$1|K|3|L|5|6|7|1I|8|@$9|1J|A|1K|B|M]]|D|@]|E|$]]|$1|N|3|O|5|P|7|1L|8|@]|D|@]|E|$Q|R]]|$1|S|3|T|5|6|7|1M|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1N|8|@$9|1O|A|1P|B|M]|$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|C]|$9|1U|A|1V|B|C]|$9|1W|A|1X|B|C]|$9|1Y|A|1Z|B|C]|$9|20|A|21|B|C]|$9|22|A|23|B|C]|$9|24|A|25|B|C]|$9|26|A|27|B|C]|$9|28|A|29|B|C]|$9|2A|A|2B|B|C]|$9|2C|A|2D|B|C]|$9|2E|A|2F|B|C]|$9|2G|A|2H|B|C]|$9|2I|A|2J|B|C]|$9|2K|A|2L|B|C]]|D|@]|E|$]]|$1|W|3|T|5|6|7|2M|8|@]|D|@]|E|$]]|$1|X|3|Y|5|6|7|2N|8|@]|D|@$9|2O|A|2P|1|2Q]]|E|$]]|$1|Z|3|-4|5|6|7|2R|8|@]|D|@]|E|$]]]|10|$11|$5|12|13|14|E|$15|16]]|17|$5|12|13|14|E|$15|Y]]]]

You would need to assign the <code>background-image</code> property to same selector that you assigning <code>background-blend-mode</code>. So this may not work in your case.

<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode" rel="nofollow">From the Docs</a>

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

Syntax Example:

<pre><code>.blended {
 background-image: url(face.jpg);
 background-color: red;
 background-blend-mode: multiply;
}
</code></pre>

<hr>
Along with <code>multiply</code> you can also use: <code>screen</code>, <code>overlay</code>, <code>darken</code>, <code>lighten</code>, <code>color-dodge</code>, <code>color-burn</code>, <code>hard-light</code>, <code>soft-light</code>, <code>difference</code>, <code>exclusion</code>, <code>hue</code>, <code>saturation</code>, <code>color</code>, and <code>luminosity</code>. And also <code>normal</code> 

<a href="https://css-tricks.com/basics-css-blend-modes/" rel="nofollow">Source</a>

blocks|key|2556287|text|如果您想将一个元素与另一个元素混合，则应该使用的属性是混合混合模式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2556288|它具有与背景混合模式相同的语法，但这个语法只适用于元素内的背景(正如M.Doye所说)。|2556289|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

If you want to blend an element over another, the property that you should use is mix-blend-mode.

It has the same syntax that background-blend-mode, but this one applies only to the in-element backgrounds (as M.Doye says)

blocks|key|2556308|text|为了使代码工作，需要向元素添加一个背景图像。所以您的代码应该如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2556309|.carousel-caption+{
+++background-image:+url('image.png');
+++background-color:+rgba(0,+119,+137,+0.7);+
+++background-blend-mode:+multiply;
}|code-block|syntax|javascript|2556310|您可以查看一篇很棒的文章这里，它进一步解释了混合模式属性。|2556311|entityMap|0|LINK|mutability|MUTABLE|url|https://kolosek.com/css-blend-mode/^0|8|5|0|0|C|2|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

In order for your code to work, you need to add a background image to the element. So your code should look like this:

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

There is a great article <a href="https://kolosek.com/css-blend-mode/" rel="nofollow noreferrer">here</a> you can check out, that gives a further explanation of the blend mode property.

I am using the carousel component from bootstrap and also want to use the CSS blend-mode <code>background-blend-mode: multiply;</code> for the caption.

Unfortunately, the blend mode doesn't work.

The code is the following:

<pre><code>&lt;div class="carousel-inner" role="listbox"&gt;
 &lt;div class="item"&gt;
 &lt;div class="carousel-caption"&gt;
 CAPTION CONTENT
 &lt;/div&gt;
 &lt;img src="imgage.png" class="img-responsive" /&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

The CSS is the following:

<pre><code>.carousel-caption {
 background-color: rgba(0, 119, 137, 0.7); 
 background-blend-mode: multiply;
}
</code></pre>

Is this the wrong way?

CSS blend mode for Bootstrap carousel caption

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在使用引导程序中的旋转木马组件，并且也希望使用CSS混合模式的background-blend-mode: multiply;作为标题。不幸的是，混合模式不起作用。守则如下：<div class="carousel-inner" role="listbox"> <div class="item"> ...

问用于引导旋转木马标题的CSS混合模式
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于引导旋转木马标题的CSS混合模式EN