CSS background-blend-mode property
Examples
Mixed mode:
div {
width: 290px;
height: 69px;
background-size: 290px 69px;
background-repeat: no-repeat;
background-image: linear-gradient ( to right, green 0%, white 100%), url ( 'logo.png');
background-blend-mode: color- dodge;
}
width: 290px;
height: 69px;
background-size: 290px 69px;
background-repeat: no-repeat;
background-image: linear-gradient ( to right, green 0%, white 100%), url ( 'logo.png');
background-blend-mode: color- dodge;
}
Definition and Usage
background-blend-mode attribute defines the blend mode of the background layer (image color).
Defaults: | normal |
---|---|
Inherited: | no |
Animatable: | no. See animatable |
version: | CSS3 |
JavaScript syntax: | object .style.backgroundBlendMode = "screen" |
Browser Support
Figures in the table represent the first browser to support the property version number.
Attributes | |||||
---|---|---|---|---|---|
background-blend-mode | 35.0 | not support | 30.0 | 7.1 | 22.0 |
CSS Syntax
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
Property Value
value | description | Examples |
---|---|---|
normal | Defaults. Setting the normal blend mode. | |
multiply | Multiply mode. | |
screen | Color mode. | |
overlay | Overlay mode. | |
darken | Dimmer mode. | |
lighten | Brighten mode. | |
color-dodge | Color Dodge mode. | |
saturation | Saturation mode. | |
color | Color mode. | |
luminosity | Brightness mode. |
related articles
CSS tutorial: CSS background