mix-blend-mode
尝试一下
mix-blend-mode
CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。
语法
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