css3 - CSS blend mode for Bootstrap carousel caption -


i using carousel component bootstrap , want use css blend-mode background-blend-mode: multiply; caption.

unfortunately, blend mode doesn't work.

the code 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 following:

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

is wrong way?

you need assign background-image property same selector assigning background-blend-mode. may not work in case.

from docs

the background-blend-mode css property describes how element's background images should blend each other , element's background color.

syntax example:

.blended {   background-image: url(face.jpg);   background-color: red;   background-blend-mode: multiply; } 


along multiply can use: screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, , luminosity. , normal

source


Popular posts from this blog

html/hta mutiple file in audio player -

debugging - Reference - What does this error mean in PHP? -