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?

score 2 · Answer 1 · answered Apr 10 '15 at 21:01

2

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)

answered Apr 10 '15 at 21:01

vals

61,425
11
89
138

score 0 · Accepted Answer · answered Apr 09 '15 at 20:53

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

OK thanks. Unfortunately, this way is not the way the bootstrap slider works :-( — Cray, Apr 10 '15 at 09:26

score 0 · Answer 3 · answered Apr 11 '18 at 08:04

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.

CSS blend mode for Bootstrap carousel caption

3 Answers3