CSS background-blend-mode 属性用于确定元素的背景图像如何相互混合或与背景颜色混合。
以与 background-image 属性相同的顺序定义混合模式非常重要，因为如果混合模式和背景图像列表的长度不相等，它将被重复和/或截断，直到时间长度匹配。
可能的值
- <blend-mode>：要应用的混合模式，可以是正常、变暗和/或亮度等。
可以传递多个值，用逗号分隔。
适用于
所有 HTML 元素。
DOM 语法
object.style.backgroudBlendMode = "normal | darken | luminosity | darken, luminosity"
CSS background-blend-mode - 具有不同的混合模式
以下示例演示了背景图像如何使用不同的背景混合模式相互交互 -
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: url('images/tree.jpg'), url('images/border.png');
padding: 10px;
margin: 5px;
display: inline-block;
font-weight: 800;
}
</style>
</head>
<body>
<div style="background-blend-mode: saturation;">saturation</div>
<div style="background-blend-mode: luminosity;">luminosity</div>
<div style="background-blend-mode: darken;">darken</div>
<div style="background-blend-mode: hue;">hue</div>
<div style="background-blend-mode: normal;">normal</div>
<div style="background-blend-mode: overlay;">overlay</div>
</body>
</html>
