背景混合模式 | 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>定义混合的模式，可以有多个值，用逗号间隔。
正式语法
<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 |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
