CSS <blend-mode> 数据类型指定元素重叠时应使用的配色方案。该数据类型由background-blend-mode 和mix-blend-mode 属性使用。
可能的值
normal -默认值。顶部颜色完全覆盖底部颜色。
multiply - 顶部和底部颜色值相乘以获得最终颜色。
screen - 最终颜色通过反转、相乘，然后再次反转该值获得。
overlay - 如果底部颜色为，则最终颜色通过相乘确定如果颜色较浅，则较暗或屏蔽。与"硬光"类似，但交换了图层。
darken - 最终颜色是每个颜色通道的最暗值。
lighten - 最终颜色是每个颜色通道的最亮值。
color-dodge - 将底部颜色除以顶部颜色的倒数得到最终颜色。
color-burn - 反转底部颜色，将其除以顶部颜色，然后反转该值以获得最终颜色。
hard-light - 最终颜色通过乘以确定顶部颜色是否较深或与"屏幕"相同（如果顶部颜色较亮）。与"叠加"类似，但交换了图层。
soft-light - 最终颜色比强光更柔和。与强光类似。
difference - 最终颜色是较浅色调和较暗色调之间的差异。黑色不会影响结果，但白色会交换颜色。
exclusion- 与"差异"类似，对比度较小。黑色层没有效果，而白色则反转其他颜色。
hue - 最终颜色使用顶部颜色的色调以及底部颜色的饱和度和亮度。
saturation - 最终颜色将顶部颜色的饱和度与底部颜色的色调和亮度相结合。
color- 最终颜色color 将顶部颜色的色调和饱和度与底部颜色的亮度相结合。
luminosity - 它与"color"的值类似，但交换了图层。
语法
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; CSS background-blend-mode: normal
以下示例演示了 background-blend-mode: normal 属性使顶部颜色最终颜色。红色框完全覆盖了蓝色框 -
这是一个示例 -
<html>
<head>
<style>
.box {
width: 300px;
height: 200px;
position: relative;
}
.background-box {
width: 150px;
height: 150px;
background-color: blue;
}
.front-box {
width: 150px;
height: 150px;
background-color: red;
position: absolute;
top: 60px;
left: 60px;
background-blend-mode: normal;
}
</style>
</head>
<body>
<div class="box">
<div class="background-box"></div>
<div class="front-box"></div>
</div>
</body>
</html> CSS background-blend-mode:multiply
当你设置 mix-blend-mode: multiply; 红色框和蓝色框混合在一起，在两个框重叠的地方创建黑色阴影 -
<html>
<head>
<style>
.box {
width: 300px;
height: 200px;
position: relative;
}
.background-box {
width: 150px;
height: 150px;
background-color: blue;
}
.front-box {
width: 150px;
height: 150px;
background-color: red;
position: absolute;
top: 60px;
left: 60px;
mix-blend-mode: multiply;
}
</style>
</head>
<body>
<div class="box">
<div class="background-box"></div>
<div class="front-box"></div>
</div>
</body>
</html> CSS mix-blend-mode: screen
以下示例演示了带有 mix-blend-mode: screen 的红色框与蓝色框重叠，创建了红色和蓝色混合的新颜色 -
<html>
<head>
<style>
.box {
width: 300px;
height: 200px;
position: relative;
}
.background-box {
width: 150px;
height: 150px;
background-color: blue;
}
.front-box {
width: 150px;
height: 150px;
background-color: red;
position: absolute;
top: 60px;
left: 60px;
mix-blend-mode: screen;
}
</style>
</head>
<body>
<div class="box">
<div class="background-box"></div>
<div class="front-box"></div>
</div>
</body>
</html> CSS mix -blend-mode:overlay
以下示例演示了mix-blend-mode:overlay属性的使用，使蓝色框完全隐藏红色框 -
<html>
<head>
<style>
.box {
width: 300px;
height: 200px;
position: relative;
}
.background-box {
width: 150px;
height: 150px;
background-color: blue;
}
.front-box {
width: 150px;
height: 150px;
background-color: red;
position: absolute;
top: 60px;
left: 60px;
mix-blend-mode: overlay;
}
</style>
</head>
<body>
<div class="box">
<div class="background-box"></div>
<div class="front-box"></div>
</div>
</body>
</html> CSS mix-blend-mode: darken
下面的示例演示了 mix-blend-mode: darken 属性组合了红色和蓝色框，在它们重叠的地方形成较深的颜色 -
<html>
<head>
<style>
.box {
width: 300px;
height: 200px;
position: relative;
}
.background-box {
width: 150px;
height: 150px;
background-color: blue;
}
.front-box {
width: 150px;
height: 150px;
background-color: red;
position: absolute;
top: 60px;
left: 60px;
mix-blend-mode: darken;
}
</style>
</head>
<body>
<div class="box">
<div class="background-box"></div>
<div class="front-box"></div>
</div>
</body>
</html> CSS mix-blend-mode: lighten
下面的示例演示了 mix-blend-mode: lighten 属性组合了红色和蓝色框，在它们重叠的地方创建了浅色阴影 -
<html>
<head>
<style>
.box {
width: 300px;
height: 200px;
position: relative;
}
.background-box {
width: 150px;
height: 150px;
background-color: blue;
}
.front-box {
width: 150px;
height: 150px;
background-color: red;
position: absolute;
top: 60px;
left: 60px;
mix-blend-mode: lighten;
}
</style>
</head>
<body>
<div class="box">
<div class="background-box"></div>
<div class="front-box"></div>
</div>
</body>
</html> CSS mix-blend-mode: color-dodge
以下示例演示 mix-blend-mode: color-dodge 属性会导致红色框的重叠区域和蓝色框显得更亮。 −
<html>
<head>
<style>
.box {
width: 300px;
height: 200px;
position: relative;
}
.background-box {
width: 150px;
height: 150px;
background-color: blue;
}
.front-box {
width: 150px;
height: 150px;
background-color: red;
position: absolute;
top: 60px;
left: 60px;
mix-blend-mode: color-dodge;
}
</style>
</head>
<body>
<div class="box">
<div class="background-box"></div>
<div class="front-box"></div>
</div>
</body>
</html> CSS mix-blend-mode: color-burn
以下示例演示 mix-blend-mode: color-burn 属性会产生变暗效果。盒子重叠的地方变得比每种原始颜色都暗 -
<html>
<head>
<style>
.box {
width: 300px;
height: 200px;
position: relative;
}
.background-box {
width: 150px;
height: 150px;
background-color: orange;
}
.front-box {
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
top: 60px;
left: 60px;
mix-blend-mode: color-burn;
}
</style>
</head>
<body>
<div class="box">
<div class="background-box"></div>
<div class="front-box"></div>
</div>
</body>
</html> CSS mix-blend-mode: Hard-light
下面的例子演示了 mix- Blend-mode:Hard-light属性，应用于蓝色框，完全隐藏红色框 -
<html>
<head>
<style>
.box {
width: 300px;
height: 200px;
position: relative;
}
.background-box {
width: 150px;
height: 150px;
background-color: red;
}
.front-box {
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
top: 60px;
left: 60px;
mix-blend-mode: hard-light;
}
</style>
</head>
<body>
<div class="box">
<div class="background-box"></div>
<div class="front-box"></div>
</div>
</body>
</html> CSS mix-blend-mode: soft-light
以下示例演示了 mix-blend-mode: soft-light 属性，应用于蓝色框，导致红色框完全隐藏蓝色框 -
<html>
<head>
<style>
.box {
width: 300px;
height: 200px;
position: relative;
}
.background-box {
width: 150px;
height: 150px;
background-color: red;
}
.front-box {
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
top: 60px;
left: 60px;
mix-blend-mode: soft-light;
}
</style>
</head>
<body>
<div class="box">
<div class="background-box"></div>
<div class="front-box"></div>
</div>
</body>
</html> CSS mix-blend-mode : Difference
下面的示例演示了 mix-blend-mode: Difference 属性会导致从较浅的颜色中减去较深的颜色，并创建一个独特的颜色 -
<html>
<head>
<style>
.box {
width: 300px;
height: 200px;
position: relative;
}
.background-box {
width: 150px;
height: 150px;
background-color: red;
}
.front-box {
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
top: 60px;
left: 60px;
mix-blend-mode: difference;
}
</style>
</head>
<body>
<div class="box">
<div class="background-box"></div>
<div class="front-box"></div>
</div>
</body>
</html> CSS mix-blend-mode:exclusion
以下示例演示了 mix-blend-mode:exclusion 属性应用于蓝框。当蓝色和红色框重叠时，它们会创建独特的颜色 -
<html>
<head>
<style>
.box {
width: 300px;
height: 200px;
position: relative;
}
.background-box {
width: 150px;
height: 150px;
background-color: red;
}
.front-box {
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
top: 60px;
left: 60px;
mix-blend-mode: exclusion;
}
</style>
</head>
<body>
<div class="box">
<div class="background-box"></div>
<div class="front-box"></div>
</div>
</body>
</html> CSS mix-blend-mode: Hue
以下示例演示了 mix-blend-mode: Hue属性应用于蓝色框。当蓝色和橙色框重叠时，它会根据它们的色调值生成颜色 -
<html>
<head>
<style>
.box {
width: 300px;
height: 200px;
position: relative;
}
.background-box {
width: 150px;
height: 150px;
background-color: orange;
}
.front-box {
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
top: 60px;
left: 60px;
mix-blend-mode: hue;
}
</style>
</head>
<body>
<div class="box">
<div class="background-box"></div>
<div class="front-box"></div>
</div>
</body>
</html> CSS mix-blend-mode:saturation
以下示例演示了红色框使用 mix-blend-mode: saturation根据顶层创建新的颜色饱和度 -
<html>
<head>
<style>
.box {
width: 300px;
height: 200px;
position: relative;
}
.background-box {
width: 150px;
height: 150px;
background-color: orange;
}
.front-box {
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
top: 60px;
left: 60px;
mix-blend-mode: saturation;
}
</style>
</head>
<body>
<div class="box">
<div class="background-box"></div>
<div class="front-box"></div>
</div>
</body>
</html> CSS mix-blend-mode: color
以下示例演示了具有mix-blend-mode: color的红色框根据顶层的色调和饱和度创建新颜色 -
<html>
<head>
<style>
.box {
width: 300px;
height: 200px;
position: relative;
}
.background-box {
width: 150px;
height: 150px;
background-color: orange;
}
.front-box {
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
top: 60px;
left: 60px;
mix-blend-mode: color;
}
</style>
</head>
<body>
<div class="box">
<div class="background-box"></div>
<div class="front-box"></div>
</div>
</body>
</html> CSS mix-blend-mode: luminosity
以下内容示例演示了 mix-blend-mode: luminosity 属性应用于蓝色框。当蓝色和橙色框重叠时，它们会产生深色 -
<html>
<head>
<style>
.box {
width: 300px;
height: 200px;
position: relative;
}
.background-box {
width: 150px;
height: 150px;
background-color: orange;
}
.front-box {
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
top: 60px;
left: 60px;
mix-blend-mode: luminosity;
}
</style>
</head>
<body>
<div class="box">
<div class="background-box"></div>
<div class="front-box"></div>
</div>
</body>
</html>