这篇翻译不完整。请帮忙从英语翻译这篇文章。
Summary
The mix-blend-mode
CSS property describes how an element content should blend with the content of the element that is below it and the element's background.
初始值 | normal |
---|---|
适用元素 | all HTML elements |
是否是继承属性 | 否 |
适用媒体 | visual |
计算值 | as specified |
是否适用于 CSS 动画 | 否 |
正规顺序 | the unique non-ambiguous order defined by the formal grammar |
Creates stacking context | yes |
Syntax
Formal syntax: <blend-mode>
mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-blend-mode: difference; mix-blend-mode: exclusion; mix-blend-mode: hue; mix-blend-mode: saturation; mix-blend-mode: color; mix-blend-mode: luminosity; mix-blend-mode: initial; mix-blend-mode: inherit; mix-blend-mode: unset;
Values
<blend-mode>
- Is a
<blend-mode>
denoting the blending mode that should be applied. There can be several values, separated by commas.
Examples
<svg> <circle cx="40" cy="40" r="40" fill="red"/> <circle cx="80" cy="40" r="40" fill="lightgreen"/> <circle cx="60" cy="80" r="40" fill="blue"/> </svg>
circle { mix-blend-mode: screen; }
Live result
Specifications
Specification | Status | Comment |
---|---|---|
Compositing and blending Level 1 mix-blend-mode |
Candidate Recommendation | Initial specification. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support |
41.0 |
32.0 (32.0) | ? | ? | 8.0 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support |
41.0 |
32.0 (32.0) | ? | ? | 8.0 |