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.
Syntax -
|
background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;
|
Now will look at the values
normal -
This is the default. Sets the blending mode to normal
multiply -
Sets the blending mode to multiply
screen -
Sets the blending mode to screen
overlay -
Sets the blending mode to overlay
darken -
Sets the blending mode to darken
Lighten -
Sets the blending mode to lighten
color-dodge -
Sets the blending mode to color-dodge
Saturation -
Sets the blending mode to saturation
Color -
Sets the blending mode to color
Luminosity -
Sets the blending mode to luminosity
Now we will see example -
Example -
Two backgrounds combined with the multiply blend mode
Output -
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
Output -
Example 3 - Adding texture to an image
Example -
Output -
