CSS background-blend- mode Property
A background-blend-mode merges not only multiple background images, but also the background-color.
These stacked layers are then combined by the blend mode, so you can set a background color to the desired hue, and blend it into the image.
background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;
Now will look at the values
This is the default. Sets the blending mode to normal
Sets the blending mode to multiply
Sets the blending mode to screen
Sets the blending mode to overlay
Sets the blending mode to darken
Sets the blending mode to lighten
Sets the blending mode to color-dodge
Sets the blending mode to saturation
Sets the blending mode to color
Sets the blending mode to luminosity
Now we will see example -
Two backgrounds combined with the multiply blend mode
NOTE If a background image has some transparency, other backgrounds behind it will show through the transparent areas, even without the use of blend modes. You can achieve this with a transparent png or gif, or with a gradient that uses the transparent keyword as one of its colors.
Example 2 - Tinting an image
Image colored with a uniform blue hue
Example 3 - Adding texture to an image