CSS3 新增了一个很有意思的属性 -- mix-blend-mode
,其中 mix 和 blend 的中文意译均为混合,那么这个属性的作用直译过来就是混合混合模式,当然,我们我们通常称之为混合模式。
参数展示:
{
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;
}
使用方法:
<div class="container">
<div class="mode red"></div>
<div class="mode blue"></div>
<div class="mode white"></div>
</div>
style
body {
background-color: #fff;
}
.container {
position: relative;
width: 150px;
height: 150px;
margin: 100px auto;
}
.container>div {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
border-radius: 50%;
mix-blend-mode: normal;
}
.title {
color: #333;
font-size: 24px;
line-height: 32px;
text-align: center;
}
.red {
background-color: rgba(255, 0, 0, .8);
transform: translateX(25%);
}
.blue {
background-color: rgba(0, 255, 0, .8);
transform: translateX(-25%);
}
.white {
background-color: rgba(0, 0, 255, .8);
transform: translateY(-25%);
}
自己改参数试试。
其余demo: