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;}
All contributors
- robgmerrill124 total contributions
- christian.dinh2481 total contributions
- Anonymous contributorAnonymous contributor3077 total contributions
- robgmerrill
- christian.dinh
- Anonymous contributor
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.