CSS - background-blend-mode Property
The background-blend-mode CSS property is used in determining how an element's background images blend with each other or with the background color.
It is important to define the blending modes in the same order as that of background-image property, because if the length of the list of blending modes' and background images' is not equal, it will be either repeated and/or truncated till the time lengths match.
Possible Values
<blend-mode>: Blending mode to be applied, which can be normal, darken and/or luminosity, etc.
There can be several values passed, separated by commas.
Applies to
All the HTML elements.
DOM Syntax
object.style.backgroudBlendMode = "normal | darken | luminosity | darken, luminosity"
CSS background-blend-mode - With Different Blend Modes
The following example demonstrates how the background images interact with each other using different background blend modes −
<html> <head> <style> div { width: 100px; height: 100px; background: url('images/tree.jpg'), url('images/border.png'); padding: 10px; margin: 5px; display: inline-block; font-weight: 800; } </style> </head> <body> <div style="background-blend-mode: saturation;">saturation</div> <div style="background-blend-mode: luminosity;">luminosity</div> <div style="background-blend-mode: darken;">darken</div> <div style="background-blend-mode: hue;">hue</div> <div style="background-blend-mode: normal;">normal</div> <div style="background-blend-mode: overlay;">overlay</div> </body> </html>
Advertisements
To Continue Learning Please Login
Login with Google