Css 简明教程

CSS - mix-blend-mode Property

CSS mix-blend-mode 属性决定了元素的内容与其父元素和元素背景融合的方式。

Possible Values

<blend-mode> − 定义要使用的混合模式。
plus-darker − 使用加深叠加运算符进行混合。
plus-lighter − 使用加亮叠加运算符进行混合。淡入淡出效果很有用，因为它们消除了在两个叠加项在其不透明度相反方向上进行动画处理时的不必要的闪烁。

Applies To

所有元素。

Syntax

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 - Different mix-blend-mode Values

以下示例演示了带有背景框和前框的不同 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 - With 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 - With SVG

以下示例演示了基于 SVG 屏幕混合模式的颜色 mix-blend-mode −

<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 - With Text

以下示例演示了不同 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>