背景混合模式 | background-blend-mode
background-blend-mode
background-blend-modeCSS属性定义该元素的背景图片，以及背景色如何混合。
/* One value */
background-blend-mode: normal;
/* Two values, one per background */
background-blend-mode: darken, luminosity;
/* Global values */
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;
混合模式应该按background-imageCSS属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等，它会被截取至相等的数量。
| 初始值 | normal |
|---|---|
| 适用元素 | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to ::first-letter and ::first-line. |
| 是否是继承属性 | no |
| 适用媒体 | none |
| 计算值 | as specified |
| Animation type | discrete |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
值
<blend-mode>
正式语法
<blend-mode>#where
<blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
示例
规范
| Specification | Status | Comment |
|---|---|---|
| Compositing and Blending Level 1The definition of 'background-blend-mode' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 35 | 30.0 (30.0) | No support | 22 | 7.1 |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | No support | 30.0 (30.0) | No support | 22 | 8 |
