CSS blend mode for Bootstrap carousel caption - css

Question

I am using the carousel component from bootstrap and also want to use the CSS blend-mode background-blend-mode: multiply; for the caption.
Unfortunately, the blend mode doesn't work.
The code is the following:
<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>
The CSS is the following:
.carousel-caption {
background-color: rgba(0, 119, 137, 0.7);
background-blend-mode: multiply;
}
Is this the wrong way?

Answer 1

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)

Answer 2

You would need to assign the background-image property to same selector that you assigning background-blend-mode. So this may not work in your case.
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.
Syntax Example:
.blended {
background-image: url(face.jpg);
background-color: red;
background-blend-mode: multiply;
}
Along with multiply you can also use: screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity. And also normal
Source

Answer 3

In order for your code to work, you need to add a background image to the element. So your code should look like this:
.carousel-caption {
background-image: url('image.png');
background-color: rgba(0, 119, 137, 0.7);
background-blend-mode: multiply;
}
There is a great article here you can check out, that gives a further explanation of the blend mode property.