CSS mix-blend-mode 属性决定元素的内容应如何与其父元素的内容以及元素的背景混合。
属性值
<blend-mode>: 定义要使用的混合模式。
plus-darker: 使用 plus-darker 合成运算符进行混合。
plus-lighter: 与 plus-lighter 合成操作符混合。交叉淡入淡出效果非常有用，因为当两个重叠的项目以相反方向设置不透明度动画时，它们可以消除不需要的闪烁。
适用范围
所有元素。
语法
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; CSS mix-blend-mode: 不同的值
以下示例演示了不同 mix-blend-mode 的效果背景框和前框 -
<html>
<head>
<style>
.box {
width: 200px;
height: 150px;
position: relative;
margin: 10px;
padding: 5px;
border: 2px solid black;
}
.background-box {
width: 100px;
height: 100px;
background-color: blue;
}
.front-box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 40px;
left: 30px;
}
.mix-blend-mode-box {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
.mode-container {
display: flex;
flex-direction: column;
margin-right: 20px;
}
h3 {
margin-bottom: 10px;
}
.normal-mode {
mix-blend-mode: normal;
}
.multiply-mode {
mix-blend-mode: multiply;
}
.screen-mode {
mix-blend-mode: screen;
}
.darken-mode {
mix-blend-mode: darken;
}
.lighten-mode {
mix-blend-mode: lighten;
}
.overlay-mode {
mix-blend-mode: overlay;
}
.color-dodge-mode {
mix-blend-mode: color-dodge;
}
.back-burn {
background-color: orange;
}
.color-burn-mode {
background-color: blue;
mix-blend-mode: color-burn;
}
.hard-light-mode {
mix-blend-mode: hard-light;
}
.back-hard {
background-color: red;
}
.soft-light-mode {
background-color: blue;
mix-blend-mode: soft-light;
}
.difference-mode {
background-color: blue;
mix-blend-mode: difference;
}
.exclusion-mode {
background-color: blue;
mix-blend-mode: difference;
}
.hue-mode {
background-color: blue;
mix-blend-mode: hue;
}
.saturation-mode {
blend-mode: saturation;
}
.color-mode {
background-color: blue;
mix-blend-mode: hue;
}
.luminosity-mode {
background-color: blue;
mix-blend-mode: luminosity;
}
.plus-darker-mode {
background-color: blue;
mix-blend-mode: plus-darker;
}
.plus-lighter-mode {
background-color: blue;
mix-blend-mode: plus-lighter;
}
</style>
</head>
<body>
<div class="mix-blend-mode-box">
<div class="mode-container">
<h3>mix-blend-mode: normal</h3>
<div class="box">
<div class="background-box"></div>
<div class="front-box normal-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: multiply</h3>
<div class="box">
<div class="background-box"></div>
<div class="front-box multiply-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: screen</h3>
<div class="box">
<div class="background-box"></div>
<div class="front-box screen-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: darken</h3>
<div class="box">
<div class="background-box"></div>
<div class="front-box darken-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: lighten</h3>
<div class="box">
<div class="background-box"></div>
<div class="front-box lighten-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: overlay</h3>
<div class="box">
<div class="background-box"></div>
<div class="front-box overlay-mode"></div>
</div>
</div>
</div>
<div class="mix-blend-mode-box">
<div class="mode-container">
<h3>mix-blend-mode: color-dodge</h3>
<div class="box">
<div class="background-box"></div>
<div class="front-box color-dodge-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: color-burn</h3>
<div class="box">
<div class="background-box back-burn"></div>
<div class="front-box color-burn-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: hard-light</h3>
<div class="box">
<div class="background-box"></div>
<div class="front-box hard-light-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: soft-light</h3>
<div class="box">
<div class="background-box back-hard"></div>
<div class="front-box soft-light-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: difference</h3>
<div class="box">
<div class="background-box back-hard"></div>
<div class="front-box difference-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: exclusion</h3>
<div class="box">
<div class="background-box back-hard"></div>
<div class="front-box exclusion-mode"></div>
</div>
</div>
</div>
<div class="mix-blend-mode-box">
<div class="mode-container">
<h3>mix-blend-mode: hue</h3>
<div class="box">
<div class="background-box back-burn"></div>
<div class="front-box hue-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: saturation</h3>
<div class="box">
<div class="background-box"></div>
<div class="front-box saturation-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: color</h3>
<div class="box">
<div class="background-box back-burn"></div>
<div class="front-box color-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: luminosity</h3>
<div class="box">
<div class="background-box back-burn"></div>
<div class="front-box luminosity-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: plus-darker</h3>
<div class="box">
<div class="background-box back-burn"></div>
<div class="front-box plus-darker-mode"></div>
</div>
</div>
<div class="mode-container">
<h3>mix-blend-mode: plus-lighter</h3>
<div class="box">
<div class="background-box back-burn"></div>
<div class="front-box plus-lighter-mode"></div>
</div>
</div>
</div>
</body>
</html> CSS mix-blend-mode: 使用 HTML
以下示例演示如何在屏幕混合模式下混合圆形颜色 -
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
border-radius: 50%;
mix-blend-mode: screen;
position: absolute;
}
.box1 {
background: blueviolet;
}
.box2 {
background: lightcoral;
left: 50px;
}
.box3 {
background: green;
left: 30px;
top: 50px;
}
.union {
isolation: isolate;
position: relative;
}
</style>
</head>
<body>
<div class="union">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
</body>
</html> CSS mix-blend-mode: 使用 SVG
以下示例演示基于 SVG 屏幕混合模式的颜色混合模式 -
<html>
<head>
<style>
ellipse {
mix-blend-mode: screen;
}
.union {
isolation: isolate;
}
</style>
</head>
<body>
<svg>
<g class="union">
<ellipse cx="50" cy="40" rx="50" ry="30" fill="blueviolet" />
<ellipse cx="90" cy="40" rx="50" ry="30" fill="lightcoral" />
<ellipse cx="70" cy="70" rx="50" ry="30" fill="green" />
</g>
</svg>
</body>
</html> CSS mix-blend-mode: 使用 Text
以下示例演示了不同 mix-blend-mode 对绿色容器内文本的影响 -
<html>
<head>
<style>
.container {
background-color: green;
}
p {
font: italic normal bold 30px Arial, sans-serif;;
color: orange;
padding: 10px;
margin: 0;
}
.multiply-mode {
mix-blend-mode: multiply;
}
.screen-mode {
mix-blend-mode: screen;
}
.hard-light-mode {
mix-blend-mode: difference;
}
</style>
</head>
<body>
<div class="container">
<p>Without blend mode</p>
<p class="multiply-mode">mix-blend-mode: multiply</p>
<p class="screen-mode">mix-blend-mode: screen</p>
<p class="hard-light-mode">mix-blend-mode: difference</p>
</div>
</body>
</html>