混合模式 | mix-blend-mode
mix-blend-modeCSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。
/* Keyword values */
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;
/* Global values */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;初始值 | normal |
|---|---|
适用元素 | all elements |
是否是继承属性 | no |
适用媒体 | visual |
计算值 | as specified |
Animation type | discrete |
正规顺序 | the unique non-ambiguous order defined by the formal grammar |
Creates stacking context | yes |
语法
值
<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示例
<svg>
<g class="isolate">
<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"/>
</g>
</svg>circle { mix-blend-mode: screen; }
.isolate { isolation: isolate; } /* without isolation, the background color will be taken into account */演示
规范
Specification | Status | Comment |
|---|---|---|
Compositing and Blending Level 1The definition of 'mix-blend-mode' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
Basic support | 41.0 | 32.0 (32.0) | ? | (Yes) | 8.0 |
SVG | No support | 32.0 (32.0) | ? | No support | No support |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
Basic support | 41.0 | 32.0 (32.0) | ? | ? | 8.0 |
SVG | No support | 32.0 (32.0) | ? | No support | No support |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
