htmlcss

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.

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;
}