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.
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