CSS 数据类型<blend-mode>指定了元素重叠时应使用的颜色方案。background-blend-mode 和 mix-blend-mode 属性都使用此数据类型。
可能的值
- normal − 默认值。顶部颜色完全覆盖了底部颜色。
- multiply - 将顶部和底部颜色值相乘以获得最终颜色。
- screen - 最终的颜色是通过反转、相乘，然后再次反转该值来获得的。
- overlay - 如果底部颜色较深，则通过乘以或筛选（如果颜色较浅）来确定最终颜色。类似于“hard-light”，但具有交换层。
- darken - 最终颜色是每个颜色通道的最暗值。
- lighten - 最终颜色是每个颜色通道的最亮值。
- color-dodge - 将底部颜色除以顶部颜色的倒数，得到最终颜色。
- color-burn - 反转底部颜色，将其除以顶部颜色，然后反转该值以获得最终颜色。
- hard-light - 如果顶部颜色较深或与“screen ”相同（如果颜色较浅），则通过乘以最终颜色来确定。类似于“overlay ”，但具有交换层。
- soft-light - 最终颜色比硬光更柔和。类似于硬光。
- difference − 最终颜色是较浅和较深阴影之间的差异。黑色不会影响结果，但白色会交换颜色。
- exclusion - 类似于“difference ”，对比度较小。黑色层没有效果，而白色则反转其他颜色。
- hue - 最终颜色使用顶部颜色的色调以及底部颜色的饱和度和亮度。
- saturation - 最终颜色将顶部颜色的饱和度与底部颜色的色调和亮度相结合。
- 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：正常
以下示例演示了 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：乘法
当您设置 mix-blend-mode： 乘法时，红框和蓝框混合在一起，在两个框重叠的地方产生黑色阴影 -
<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： 屏幕
以下示例演示了具有 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：覆盖
以下示例演示了 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：变暗
以下示例演示了 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：减轻
以下示例演示了 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：颜色减淡
以下示例演示了 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：颜色燃烧
以下示例演示了 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：硬光
以下示例演示了 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：柔光
以下示例演示了 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：区别
以下示例演示了 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：排除
以下示例演示了 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： 色调
以下示例演示了 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：饱和度
以下示例演示了具有 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：颜色
以下示例演示了具有 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 属性应用于蓝色框。当蓝色和橙色的盒子重叠时，它们会产生深色 -
<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>
