CSS参考手册
合成与混合 | Compositing & Blending
混合模式 | mix-blend-mode
mix-blend-mode
CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。
/* 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 |
合成与混合 | Compositing & Blending相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。