mix-blend-mode
Try it
mix-blend-mode
CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。
这个交互式实例的源码存储在Github仓库。如果你想对这个交互式实例做贡献,请克隆 https://github.com/mdn/interactive-examples 并且提交你的推送。
语法
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;
值
<blend-mode>
- 表示应该应用的混合模式。
形式定义
初始值 | normal |
---|---|
适用元素 | all elements |
是否是继承属性 | 否 |
计算值 | as specified |
Animation type | discrete |
Creates stacking context | yes |
形式语法
示例
不同mix-blend-mode值的效果
HTML中使用 mix-blend-mode
HTML
<div class="isolate">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
<div class="circle circle-3"></div>
</div>
CSS
.circle {
width: 80px;
height: 80px;
border-radius: 50%;
mix-blend-mode: screen;
position: absolute;
}
.circle-1 {
background: red;
}
.circle-2 {
background: lightgreen;
left: 40px;
}
.circle-3 {
background: blue;
left: 20px;
top: 40px;
}
.isolate {
isolation: isolate; /* Without isolation, the background color will be taken into account */
position: relative;
}
Result
SVG中使用 mix-blend-mode
SVG
<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>
CSS
circle { mix-blend-mode: screen; }
.isolate { isolation: isolate; } /* Without isolation, the background color will be taken into account */
Result
规范
规范 | 状态 | 注释 |
---|---|---|
Compositing and Blending Level 1 mix-blend-mode |
Candidate Recommendation | Initial specification. |
浏览器兼容性
BCD tables only load in the browser