The same concept with mix-blend-mode combines backgrounds from one layer to another changing the color of the other layer containing a color or an image. Unlike the other property, multiple blend types can be used depending on how many backgrounds are used.
Values
| Value | Description |
|---|---|
<background-blend-mode> |
Specifies a color blending type for the background image or color. |
colorcolor-burncolor-dodgedarkendifferenceexclusionhard-lighthuelightenluminositymultiplynormaloverlaysaturationscreensoft-light
CSS examples:
body {
background:lime url("https://i.pinimg.com/originals/78/e4/c7/78e4c7da95c43664fbc3e806af822531.jpg");
background-blend-mode:screen;
}
body {
background:url("https://vignette.wikia.nocookie.net/disney/images/f/f4/Mickey_Fun_Wheel.png/revision/latest?cb=20180908182717"), url("https://vignette.wikia.nocookie.net/spyro/images/2/2e/SRT_Colossus_360.jpg/revision/latest?cb=20180905213913"), url("https://vignette.wikia.nocookie.net/spongebob/images/2/23/Galleria.jpg/revision/latest?cb=20180908144839");
background-blend-mode:color-dodge, multiply;
}
body {
background:url("https://vignette.wikia.nocookie.net/mario/images/7/75/MarioJump.png/revision/latest?cb=20151215223312"), url("https://vignette.wikia.nocookie.net/mario/images/5/5c/Luigi_MP10.png/revision/latest?cb=20151218234643");
background-blend-mode:difference;
}