14 DEC

CSS background-blend-mode Property

Specify the Background Blend-mode to be “lighten”:

div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url(“img_tree.gif”), url(“paper.gif”);
background-blend-mode: lighten;
}

Try it Yourself »

More “Try it Yourself” examples below.

Definition and Usage

The background-blend-mode property defines the blending mode of each background layer (color and/or image).

Default value: normal
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.backgroundBlendMode=”screen”
CSS Syntax
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
Property Values
Value Description Play it
normal This is default. Sets the blending mode to normal #myDIV {
width: 200px;
height: 300px;
background-size: 200px 200px;
background-repeat: no-repeat;
background-image: linear-gradient(to right,blue 0%,red 100%),url(‘xyz.gif’);
background-blend-mode: normal;
}
multiply Sets the blending mode to multiply #myDIV {
width: 200px;
height: 300px;
background-size: 200px 200px;
background-repeat: no-repeat;
background-image: linear-gradient(to right,blue 0%,red 100%),url(‘xyz.gif’);
background-blend-mode:multiply;
}
screen Sets the blending mode to screen #myDIV {
width: 200px;
height: 300px;
background-size: 200px 200px;
background-repeat: no-repeat;
background-image: linear-gradient(to right,blue 0%,red 100%),url(‘xyz.gif’);
background-blend-mode:screen;
}
overlay Sets the blending mode to overlay #myDIV {
width: 200px;
height: 300px;
background-size: 200px 200px;
background-repeat: no-repeat;
background-image: linear-gradient(to right,blue 0%,red 100%),url(‘xyz.gif’);
background-blend-mode:overlay;
}
darken Sets the blending mode to darken #myDIV {
width: 200px;
height: 300px;
background-size: 200px 200px;
background-repeat: no-repeat;
background-image: linear-gradient(to right,blue 0%,red 100%),url(‘xyz.gif’);
background-blend-mode:darken ;
}
lighten Sets the blending mode to lighten #myDIV {
width: 200px;
height: 300px;
background-size: 200px 200px;
background-repeat: no-repeat;
background-image: linear-gradient(to right,blue 0%,red 100%),url(‘xyz.gif’);
background-blend-mode:lighten;
}
color-dodge Sets the blending mode to color-dodge #myDIV {
width: 200px;
height: 300px;
background-size: 200px 200px;
background-repeat: no-repeat;
background-image: linear-gradient(to right,blue 0%,red 100%),url(‘xyz.gif’);
background-blend-mode:color-dodge;
}
saturation Sets the blending mode to saturation #myDIV {
width: 200px;
height: 300px;
background-size: 200px 200px;
background-repeat: no-repeat;
background-image: linear-gradient(to right,blue 0%,red 100%),url(‘xyz.gif’);
background-blend-mode:saturation ;
}
color Sets the blending mode to color #myDIV {
width: 200px;
height: 300px;
background-size: 200px 200px;
background-repeat: no-repeat;
background-image: linear-gradient(to right,blue 0%,red 100%),url(‘xyz.gif’);
background-blend-mode:color;
}
luminosity Sets the blending mode to luminosity #myDIV {
width: 200px;
height: 300px;
background-size: 200px 200px;
background-repeat: no-repeat;
background-image: linear-gradient(to right,blue 0%,red 100%),url(‘xyz.gif’);
background-blend-mode:luminosity;
}
Example

Specify the blending mode to be “multiply”:

div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url(“img_tree.gif”), url(“paper.gif”);
background-blend-mode: multiply;
}

Try it Yourself »

Example

Specify the blending mode to be “screen”:

div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url(“img_tree.gif”), url(“paper.gif”);
background-blend-mode: screen;
}

Try it Yourself »

Post Author: Zahid Farid

Related Posts '