CSS 数据类型 - blend-mode

上一页
下一页

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>
本页
上一页
下一页