mix-blend-mode
**mix-blend-mode
** CSS 属性设置元素内容应如何与其父元素的内容和元素的背景混合。
试一试
语法
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;
mix-blend-mode: plus-darker;
mix-blend-mode: plus-lighter;
/* Global values */
mix-blend-mode: inherit;
mix-blend-mode: initial;
mix-blend-mode: revert;
mix-blend-mode: revert-layer;
mix-blend-mode: unset;
值
<blend-mode>
-
应应用的混合模式。
plus-darker
-
使用 plus-darker 合成运算符 进行混合。
plus-lighter
-
使用 plus-lighter 合成运算符 进行混合。对于交叉淡入淡出效果很有用(防止两个重叠元素以相反方向动画化其不透明度时出现不需要的闪烁)。
正式定义
正式语法
示例
不同 mix-blend-mode 值的效果
<div class="grid">
<div class="col">
<div class="note">
Blending in isolation (no blending with the background)
</div>
<div class="row isolate">
<div class="cell">
normal
<div class="container normal">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<defs>
<linearGradient id="red">
<stop offset="0" stop-color="hsl(0 100% 50%)" />
<stop offset="100%" stop-color="hsl(0 0% 100%)" />
</linearGradient>
<linearGradient id="green">
<stop offset="0" stop-color="hsl(120 100% 50%)" />
<stop offset="100%" stop-color="hsl(120 0% 100%)" />
</linearGradient>
<linearGradient id="blue">
<stop offset="0" stop-color="hsl(240 100% 50%)" />
<stop offset="100%" stop-color="hsl(240 0% 100%)" />
</linearGradient>
</defs>
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
multiply
<div class="container multiply">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
darken
<div class="container darken">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
screen
<div class="container screen">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
lighten
<div class="container lighten">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
overlay
<div class="container overlay">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
color-dodge
<div class="container color-dodge">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
color-burn
<div class="container color-burn">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
hard-light
<div class="container hard-light">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
soft-light
<div class="container soft-light">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
difference
<div class="container difference">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
exclusion
<div class="container exclusion">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
hue
<div class="container hue">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
saturation
<div class="container saturation">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
color
<div class="container color">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
luminosity
<div class="container luminosity">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
plus-darker
<div class="container plus-darker">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
plus-lighter
<div class="container plus-lighter">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
</div>
<div class="note">Blending globally (blend with the background)</div>
<div class="row">
<div class="cell">
normal
<div class="container normal">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
multiply
<div class="container multiply">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
darken
<div class="container darken">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
screen
<div class="container screen">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
lighten
<div class="container lighten">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
overlay
<div class="container overlay">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
color-dodge
<div class="container color-dodge">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
color-burn
<div class="container color-burn">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
hard-light
<div class="container hard-light">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
soft-light
<div class="container soft-light">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
difference
<div class="container difference">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
exclusion
<div class="container exclusion">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
hue
<div class="container hue">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
saturation
<div class="container saturation">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
color
<div class="container color">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
luminosity
<div class="container luminosity">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
plus-darker
<div class="container plus-darker">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
plus-lighter
<div class="container plus-lighter">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
html,
body {
height: 100%;
box-sizing: border-box;
background: #eee;
}
.grid {
width: 100%;
display: flex;
font: 1em monospace;
}
.row {
display: flex;
flex: 1 auto;
flex-direction: row;
flex-wrap: wrap;
height: auto;
}
.col {
display: flex;
flex: 1 auto;
flex-direction: column;
height: auto;
}
.cell {
margin: 0.5em;
padding: 0.5em;
background-color: #fff;
overflow: hidden;
text-align: center;
}
.note {
background: #fff3d4;
padding: 1em;
margin: 0.5em 0.5em 0;
font: 0.8em sans-serif;
text-align: left;
white-space: nowrap;
}
.note + .row .cell {
margin-top: 0;
}
.container {
position: relative;
background: linear-gradient(to right, #000 0%, transparent 50%, #fff 100%),
linear-gradient(to bottom, #ff0 0%, #f0f 50%, #0ff 100%);
width: 150px;
height: 150px;
margin: 0 auto;
}
.R {
transform-origin: center;
transform: rotate(-30deg);
fill: url(#red);
}
.G {
transform-origin: center;
transform: rotate(90deg);
fill: url(#green);
}
.B {
transform-origin: center;
transform: rotate(210deg);
fill: url(#blue);
}
.isolate .group {
isolation: isolate;
}
.normal .item {
mix-blend-mode: normal;
}
.multiply .item {
mix-blend-mode: multiply;
}
.screen .item {
mix-blend-mode: screen;
}
.overlay .item {
mix-blend-mode: overlay;
}
.darken .item {
mix-blend-mode: darken;
}
.lighten .item {
mix-blend-mode: lighten;
}
.color-dodge .item {
mix-blend-mode: color-dodge;
}
.color-burn .item {
mix-blend-mode: color-burn;
}
.hard-light .item {
mix-blend-mode: hard-light;
}
.soft-light .item {
mix-blend-mode: soft-light;
}
.difference .item {
mix-blend-mode: difference;
}
.exclusion .item {
mix-blend-mode: exclusion;
}
.hue .item {
mix-blend-mode: hue;
}
.saturation .item {
mix-blend-mode: saturation;
}
.color .item {
mix-blend-mode: color;
}
.luminosity .item {
mix-blend-mode: luminosity;
}
.plus-darker .item {
mix-blend-mode: plus-darker;
}
.plus-lighter .item {
mix-blend-mode: plus-lighter;
}
将 mix-blend-mode 与 HTML 结合使用
HTML
html
<div class="isolate">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
<div class="circle circle-3"></div>
</div>
CSS
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;
}
结果
将 mix-blend-mode 与 SVG 结合使用
SVG
html
<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
css
circle {
mix-blend-mode: screen;
}
.isolate {
isolation: isolate;
} /* Without isolation, the background color will be taken into account */
结果
将 mix-blend-mode 与文本结合使用
此示例使用 mix-blend-mode
将文本颜色与其父元素的背景颜色混合。
HTML
html
<div class="container">
<p>Mostly Harmless</p>
<p class="multiply">Mostly Harmless</p>
<p class="screen">Mostly Harmless</p>
<p class="hard-light">Mostly Harmless</p>
</div>
CSS
css
@import url("https://fonts.googleapis.com/css2?family=Rubik+Moonrocks&display=swap");
.container {
background-color: blue;
}
p {
font:
4rem "Rubik Moonrocks",
cursive;
font-weight: bold;
color: orange;
padding: 0.5rem;
margin: 0;
}
.multiply {
mix-blend-mode: multiply;
}
.screen {
mix-blend-mode: screen;
}
.hard-light {
mix-blend-mode: hard-light;
}
结果
规范
规范 |
---|
合成和混合级别 2 # mix-blend-mode |
浏览器兼容性
BCD 表格仅在浏览器中加载