CSS background-blend-mode property
Instance
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 ;
}
Try it out . . .
Definitions and usages
The background-blend-mode property defines the blending mode (picture and color) of the background layer.
| Default: | normal |
|---|---|
| Inherited: | no |
| Animatable: | No. View animatable |
| Version: | CSS3 |
| JavaScript syntax: | object .style.backgroundBlendMode="screen" |
Browser support
The numbers in the table support the version number of the first browser for this property.
| Property | |||||
|---|---|---|---|---|---|
| background-blend-mode | 35.0 | Not supported | 30.0 | 7.1 | 22.0 |
CSS syntax
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
The property value
| Value | Describe | Instance |
|---|---|---|
| normal | The default. Set the normal blending mode. | Try it out . . . |
| multiply | Positive stack bottom mode. | Try it out . . . |
| screen | Filter mode. | Try it out . . . |
| overlay | Overlay mode. | Try it out . . . |
| darken | Darkening mode. | Try it out . . . |
| lighten | Lightening mode. | Try it out . . . |
| color-dodge | Color fade mode. | Try it out . . . |
| saturation | Saturation mode. | Try it out . . . |
| color | Color mode. | Try it out . . . |
| luminosity | Brightness mode. | Try it out . . . |
Related articles
CSS tutorial: CSS background