CSS - mix-blend-mode 属性

上一页
下一页

CSS mix-blend-mode 属性确定元素的内容应如何与其父元素的内容和元素的背景混合。

可能的值

  • <blend-mode> - 定义要使用的混合模式。
  • plus-darker - 与 plus-darker 合成运算符混合。
  • plus-lighter - 与 plus-lighter 合成运算符混合。交叉淡入淡出效果非常有用，因为当两个重叠的项目在相反方向上为其不透明度添加动画时，它们可以消除不需要的闪烁。

适用于

所有元素。

语法


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;
mix-blend-mode: plus-darker;
mix-blend-mode: plus-lighter;

CSS mix-blend-mode - 不同的 mix-blend-mode 值

以下示例演示了带有背景框和前框的不同混合混合模式的效果 -


<html>
<head>
<style>
	 	.box {
	 	 	 width: 200px;
	 	 	 height: 150px;
	 	 	 position: relative;
	 	 	 margin: 10px;
	 	 	 padding: 5px;
	 	 	 border: 2px solid black;
	 	}
	 	.background-box {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 background-color: blue;
	 	}
	 	.front-box {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 background-color: red;
	 	 	 position: absolute;
	 	 	 top: 40px;
	 	 	 left: 30px;
	 	}
	 	.mix-blend-mode-box {
	 	 	 display: flex;
	 	 	 flex-wrap: wrap;
	 	 	 margin-bottom: 20px;
	 	}
	 	.mode-container {
	 	 	 display: flex;
	 	 	 flex-direction: column;
	 	 	 margin-right: 20px;
	 	}
	 	h3 {
	 	 	 margin-bottom: 10px;
	 	}
	 	.normal-mode {
	 	 	 mix-blend-mode: normal;
	 	}
	 	.multiply-mode {
	 	 	 mix-blend-mode: multiply;
	 	}
	 	.screen-mode {
	 	 	 mix-blend-mode: screen;
	 	}
	 	.darken-mode {
	 	 	 mix-blend-mode: darken;
	 	}
	 	.lighten-mode {
	 	 	 mix-blend-mode: lighten;
	 	}
	 	.overlay-mode {
	 	 	 mix-blend-mode: overlay;
	 	}
	 	.color-dodge-mode {
	 	 	 mix-blend-mode: color-dodge;
	 	}
	 	.back-burn {
	 	 	 background-color: orange;
	 	}
	 	.color-burn-mode {
	 	 	 background-color: blue;
	 	 	 mix-blend-mode: color-burn;
	 	}
	 	.hard-light-mode {
	 	 	 mix-blend-mode: hard-light;
	 	}
	 	.back-hard {
	 	 	 background-color: red;
	 	}
	 	.soft-light-mode {
	 	 	 background-color: blue;
	 	 	 mix-blend-mode: soft-light;
	 	}
	 	.difference-mode {
	 	 	 background-color: blue;
	 	 	 mix-blend-mode: difference;
	 	}
	 	.exclusion-mode {
	 	 	 background-color: blue;
	 	 	 mix-blend-mode: difference;
	 	}
	 	.hue-mode {
	 	 	 background-color: blue;
	 	 	 mix-blend-mode: hue;
	 	}
	 	.saturation-mode {
	 	 	 blend-mode: saturation;
	 	}
	 	.color-mode {
	 	 	 background-color: blue;
	 	 	 mix-blend-mode: hue;
	 	}
	 	.luminosity-mode {
	 	 	 background-color: blue;
	 	 	 mix-blend-mode: luminosity;
	 	}
	 	.plus-darker-mode {
	 	 	 background-color: blue;
	 	 	 mix-blend-mode: plus-darker;
	 	}
	 	.plus-lighter-mode {
	 	 	 background-color: blue;
	 	 	 mix-blend-mode: plus-lighter;
	 	}
</style>
</head>
<body>
	 	<div class="mix-blend-mode-box">
	 	 	 <div class="mode-container">
	 	 	 <h3>mix-blend-mode: normal</h3>
	 	 	 <div class="box">
	 	 	 	 	<div class="background-box"></div>
	 	 	 	 	<div class="front-box normal-mode"></div>
	 	 	 </div>
	 	 	 </div>

	 	 	 <div class="mode-container">
	 	 	 <h3>mix-blend-mode: multiply</h3>
	 	 	 <div class="box">
	 	 	 	 	<div class="background-box"></div>
	 	 	 	 	<div class="front-box multiply-mode"></div>
	 	 	 </div>
	 	 	 </div>

	 	 	 <div class="mode-container">
	 	 	 <h3>mix-blend-mode: screen</h3>
	 	 	 <div class="box">
	 	 	 	 	<div class="background-box"></div>
	 	 	 	 	<div class="front-box screen-mode"></div>
	 	 	 </div>
	 	 	 </div>

	 	 	 <div class="mode-container">
	 	 	 <h3>mix-blend-mode: darken</h3>
	 	 	 <div class="box">
	 	 	 	 	<div class="background-box"></div>
	 	 	 	 	<div class="front-box darken-mode"></div>
	 	 	 </div>
	 	 	 </div>

	 	 	 <div class="mode-container">
	 	 	 <h3>mix-blend-mode: lighten</h3>
	 	 	 <div class="box">
	 	 	 	 	<div class="background-box"></div>
	 	 	 	 	<div class="front-box lighten-mode"></div>
	 	 	 </div>
	 	 	 </div>

	 	 	 <div class="mode-container">
	 	 	 <h3>mix-blend-mode: overlay</h3>
	 	 	 <div class="box">
	 	 	 	 	<div class="background-box"></div>
	 	 	 	 	<div class="front-box overlay-mode"></div>
	 	 	 </div>
	 	 	 </div>
	 	</div>

	 	<div class="mix-blend-mode-box">
	 	 	 <div class="mode-container">
	 	 	 <h3>mix-blend-mode: color-dodge</h3>
	 	 	 <div class="box">
	 	 	 	 	<div class="background-box"></div>
	 	 	 	 	<div class="front-box color-dodge-mode"></div>
	 	 	 </div>
	 	 	 </div>

	 	 	 <div class="mode-container">
	 	 	 <h3>mix-blend-mode: color-burn</h3>
	 	 	 <div class="box">
	 	 	 	 	<div class="background-box back-burn"></div>
	 	 	 	 	<div class="front-box color-burn-mode"></div>
	 	 	 </div>
	 	 	 </div>

	 	 	 <div class="mode-container">
	 	 	 <h3>mix-blend-mode: hard-light</h3>
	 	 	 <div class="box">
	 	 	 	 	<div class="background-box"></div>
	 	 	 	 	<div class="front-box hard-light-mode"></div>
	 	 	 </div>
	 	 	 </div>

	 	 	 <div class="mode-container">
	 	 	 <h3>mix-blend-mode: soft-light</h3>
	 	 	 <div class="box">
	 	 	 	 	<div class="background-box back-hard"></div>
	 	 	 	 	<div class="front-box soft-light-mode"></div>
	 	 	 </div>
	 	 	 </div>

	 	 	 <div class="mode-container">
	 	 	 <h3>mix-blend-mode: difference</h3>
	 	 	 <div class="box">
	 	 	 	 	<div class="background-box back-hard"></div>
	 	 	 	 	<div class="front-box difference-mode"></div>
	 	 	 </div>
	 	 	 </div>

	 	 	 <div class="mode-container">
	 	 	 <h3>mix-blend-mode: exclusion</h3>
	 	 	 <div class="box">
	 	 	 	 	<div class="background-box back-hard"></div>
	 	 	 	 	<div class="front-box exclusion-mode"></div>
	 	 	 </div>
	 	 	 </div>
	 	</div>

	 	<div class="mix-blend-mode-box">
	 	 	 <div class="mode-container">
	 	 	 <h3>mix-blend-mode: hue</h3>
	 	 	 <div class="box">
	 	 	 	 	<div class="background-box back-burn"></div>
	 	 	 	 	<div class="front-box hue-mode"></div>
	 	 	 </div>
	 	 	 </div>

	 	 	 <div class="mode-container">
	 	 	 <h3>mix-blend-mode: saturation</h3>
	 	 	 <div class="box">
	 	 	 	 	<div class="background-box"></div>
	 	 	 	 	<div class="front-box saturation-mode"></div>
	 	 	 </div>
	 	 	 </div>

	 	 	 <div class="mode-container">
	 	 	 <h3>mix-blend-mode: color</h3>
	 	 	 <div class="box">
	 	 	 	 	<div class="background-box back-burn"></div>
	 	 	 	 	<div class="front-box color-mode"></div>
	 	 	 </div>
	 	 	 </div>

	 	 	 <div class="mode-container">
	 	 	 <h3>mix-blend-mode: luminosity</h3>
	 	 	 <div class="box">
	 	 	 	 	<div class="background-box back-burn"></div>
	 	 	 	 	<div class="front-box luminosity-mode"></div>
	 	 	 </div>
	 	 	 </div>

	 	 	 <div class="mode-container">
	 	 	 <h3>mix-blend-mode: plus-darker</h3>
	 	 	 <div class="box">
	 	 	 	 	<div class="background-box back-burn"></div>
	 	 	 	 	<div class="front-box plus-darker-mode"></div>
	 	 	 </div>
	 	 	 </div>

	 	 	 <div class="mode-container">
	 	 	 <h3>mix-blend-mode: plus-lighter</h3>
	 	 	 <div class="box">
	 	 	 	 	<div class="background-box back-burn"></div>
	 	 	 	 	<div class="front-box plus-lighter-mode"></div>
	 	 	 </div>
	 	 	 </div>
	 	</div>
</body>
</html>

CSS mix-blend-mode - 使用 HTML

以下示例演示了如何在屏幕混合模式下混合圆形颜色 -


<html>
<head>
<style>
	 	.box {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 border-radius: 50%;
	 	 	 mix-blend-mode: screen;
	 	 	 position: absolute;
	 	}
	 	.box1 {
	 	 	 background: blueviolet;	
	 	}
	 	.box2 {
	 	 	 background: lightcoral;	
	 	 	 left: 50px;
	 	}
	 	.box3 {
	 	 	 background: green;	
	 	 	 left: 30px;
	 	 	 top: 50px;
	 	}
	 	.union {
	 	 	 isolation: isolate;
	 	 	 position: relative;
	 	}
</style>
</head>
<body>
	 	<div class="union">
	 	 	 <div class="box box1"></div>
	 	 	 <div class="box box2"></div>
	 	 	 <div class="box box3"></div>
	 	</div>
</body>
</html>

CSS mix-blend-mode - 使用 SVG

以下示例演示了基于带有SVG的屏幕混合模式的颜色的混合混合模式 -


<html>
<head>
<style>
	 	ellipse {
	 	 	 mix-blend-mode: screen;
	 	}
	 	.union {
	 	 	 isolation: isolate;	
	 	}
</style>
</head>
<body>
	 	<svg>
	 	 	 <g class="union">
	 	 	 	 	<ellipse cx="50" cy="40" rx="50" ry="30" fill="blueviolet" />
	 	 	 	 	<ellipse cx="90" cy="40" rx="50" ry="30" fill="lightcoral" />
	 	 	 	 	<ellipse cx="70" cy="70" rx="50" ry="30" fill="green" />
	 	 	 </g>
	 	</svg> 	
</body>
</html>

CSS mix-blend-mode - 带文本

以下示例演示了不同的 mix-blend-mode 对绿色容器内文本的影响 -


<html>
<head>
<style>
	 	.container {
	 	 	 background-color: green;
	 	}
	 	p {
	 	 	 font: italic normal bold 30px Arial, sans-serif;;
	 	 	 color: orange;
	 	 	 padding: 10px;
	 	 	 margin: 0;
	 	}
	 	.multiply-mode {
	 	 	 mix-blend-mode: multiply;
	 	}
	 	.screen-mode {
	 	 	 mix-blend-mode: screen;
	 	}
	 	.hard-light-mode {
	 	 	 mix-blend-mode: difference;
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <p>Without blend mode</p>
	 	 	 <p class="multiply-mode">mix-blend-mode: multiply</p>
	 	 	 <p class="screen-mode">mix-blend-mode: screen</p>
	 	 	 <p class="hard-light-mode">mix-blend-mode: difference</p>
	 	</div>	
</body>
</html>
打印本页
上一页
下一页