CSS blend mode for Bootstrap carousel caption

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?

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