-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
113 lines (85 loc) · 2.46 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
---
title: background-blend-mode
slug: Web/CSS/background-blend-mode
page-type: css-property
browser-compat: css.properties.background-blend-mode
---
{{CSSRef}}
The **`background-blend-mode`** [CSS](/en-US/docs/Web/CSS) property sets how an element's background images should blend with each other and with the element's background color.
{{EmbedInteractiveExample("pages/css/background-blend-mode.html")}}
Blending modes should be defined in the same order as the {{cssxref("background-image")}} property. If the blending modes' and background images' list lengths are not equal, it will be repeated and/or truncated until lengths match.
## Syntax
```css
/* One value */
background-blend-mode: normal;
/* Two values, one per background */
background-blend-mode: darken, luminosity;
/* Global values */
background-blend-mode: inherit;
background-blend-mode: initial;
background-blend-mode: revert;
background-blend-mode: revert-layer;
background-blend-mode: unset;
```
### Values
- {{cssxref("<blend-mode>")}}
- : The blending mode to be applied. There can be several values, separated by commas.
## Formal definition
{{cssinfo}}
## Formal syntax
{{csssyntax}}
## Examples
### Basic example
```css
.item {
width: 300px;
height: 300px;
background: url("image1.png"), url("image2.png");
background-blend-mode: screen;
}
```
### Try out different blend modes
```html hidden
<div id="div"></div>
<select id="select">
<option>normal</option>
<option>multiply</option>
<option selected>screen</option>
<option>overlay</option>
<option>darken</option>
<option>lighten</option>
<option>color-dodge</option>
<option>color-burn</option>
<option>hard-light</option>
<option>soft-light</option>
<option>difference</option>
<option>exclusion</option>
<option>hue</option>
<option>saturation</option>
<option>color</option>
<option>luminosity</option>
</select>
```
```css hidden
#div {
width: 300px;
height: 300px;
background: url("br.png"), url("tr.png");
background-blend-mode: screen;
}
```
```js hidden
document.getElementById("select").onchange = (event) => {
document.getElementById("div").style.backgroundBlendMode =
document.getElementById("select").selectedOptions[0].innerHTML;
};
console.log(document.getElementById("div"));
```
{{ EmbedLiveSample('Examples', "330", "350") }}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{cssxref("<blend-mode>")}}
- {{cssxref("mix-blend-mode")}}