CSS 属性

background-blend-mode CSS 属性用于确定元素的背景图像如何相互混合或与背景颜色混合。

以与 background-image 属性相同的顺序定义混合模式非常重要，因为如果混合模式列表和背景图像的长度不相等，它将被重复和/或截断，直到时间长度匹配。

属性值

  • <blend-mode>:要应用的混合模式，可以是normal、darken 和luminosity 等，见下面的dom语法。

可以传递多个值，以逗号分隔。

适用范围

所有 HTML 元素。

DOM 语法

object.style.backgroudBlendMode = "normal | darken | luminosity | darken, luminosity"

CSS background-blend-mode: 使用不同的混合模式

以下示例演示了背景图像如何使用不同的背景相互交互混合模式 -

<html>
<head>
<style> 
   div {
      width: 100px;
      height: 100px;
      background: url('/css/images/tree.jpg'), url('/css/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>