CSS blend mode for Bootstrap carousel caption

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

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 2

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.

Answer 3

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)