CSS - background-blend-mode 属性_CSS 菜鸟教程

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>

<< CSS - background-attachment 属性 CSS - background-clip 属性 >>