background-blend-mode
Returns a new blended color based on the background color and the background images.
Syntax
background-blend-mode: <value>;
where <value>
can be one of the following: normal
| multiply
| screen
| overlay
| darken
| lighten
| color-dodge
| color-burn
| hard-light
| soft-light
| difference
| exclusion
| hue
| saturation
| color
| luminosity
normal
is the default value which imposes simple alpha blending, as CSS has permitted since its inception.lighten
means that the final result will show, at each pixel, either the image or its backdrop, whichever is lighter.darken
will show, at each pixel, whichever is darker.
Example 1
The background color will not bleed through the background image:
body {background-image: url('fish.jpg');background-color: blue;background-blend-mode: normal;}
Example 2
At each pixel, show whichever is lighter between the background image and the background color:
body {background-image: url('fish.jpg');background-color: blue;background-blend-mode: lighten;}
Example 3
At each pixel, show whichever is darker between the background image and the background color:
body {background-image: url('fish.jpg');background-color: blue;background-blend-mode: darken;}