/

HTML / CSS / JavaScript Tutorial

CSS Property: background-blend-mode

[this page | pdf | back links]

The CSS (CSS3) background-blend-mode property defines the blending mode of each background layer (i.e. colour and/or image).

 

Valid property values are:

 

Value

Description

color

Blending mode set to color

color-dodge

Blending mode set to color-dodge

darken

Blending mode set to darken

lighten

Blending mode set to lighten

luminosity

Blending mode set to luminosity

multiply

Blending mode set to multiply

normal

(default value). Blending mode set to normal

overlay

Blending mode set to overlay

saturation

Blending mode set to saturation

screen

Blending mode set to screen

 

Default Value:

normal

JavaScript syntax:

e.g. object.style.backgroundBlendMode="screen"

Inherited:

No

Animatable:

No

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
body {background-color: yellow;}
p {width: 200px; background-image: url(NematrianLogo.png);}
p.x1 {background-blend-mode: color-dodge;}
</style>
</head>
<body>
Note: this style property does not work in some browsers<br><br>
1. Element with default property<br>
<p>1</p><br><br>
2. Element set using in-file HTML style
<p class="x1">2</p><br><br>
3. Element set using JavaScript
<p id="x2">3</p>

<script>
document.getElementById("x2").style.backgroundBlendMode =
  "color-dodge";
</script>

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyBackgroundBlendMode() {
  var x = document.createElement("DIV"); x.style.backgroundBlendMode = "color-dodge"; return (window.getComputedStyle(x, null).backgroundBlendMode == "color-dodge");
}


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile