混合模式 ( mix-blend-mode )

过去要制作“图像混合”效果时，都得动用图像处理软件协助修图，现在透过 CSS 的 mix-blend-mode 图像混合模式，可以直接在浏览器中轻松实现前后图像混合的效果，这篇教学会展示 mix-blend-mode 样式属性的 multiply、screen、overlay、darken、lighten 等有趣的图像混合效果，以及介绍利用 isolation 限制图像混合的范围。

快速导览：

• 使用图像混合模式 mix-blend-mode
• mix-blend-mode 效果展示
• isolation 限制图像混合范围
• 文字与背景反差效果

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

使用图像混合模式 mix-blend-mode

使用 mix-blend-mode 是“图像混合模式”类型的 CSS 样式属性 ( 目前只有少部分浏览器和 IE 不支援 )，没有继承特性，使用后会将作用的元素根据混合模式的设定，与下层元素混合产生新的颜色，mix-blend-mode 具有下列属性值：

mix-blend-mode 效果展示

下方范例会将内层的 div 和 h2 都套用 mix-blend-mode，底色使用“橘蓝条纹斜线”作为背景，展示各种混合模式的效果。

线上展示：https://codepen.io/oxxo/pen/zxOzJXO

<!-- HTML 程式碼 -->
<div class="normal"><div><h2>oxxo</h2></div></div>
<div class="multiply"><div><h2>oxxo</h2></div></div>
<div class="screen"><div><h2>oxxo</h2></div></div>
<div class="overlay"><div><h2>oxxo</h2></div></div>
<div class="darken"><div><h2>oxxo</h2></div></div>
<div class="lighten"><div><h2>oxxo</h2></div></div>
<div class="color-dodge"><div><h2>oxxo</h2></div></div>
<div class="color-burn"><div><h2>oxxo</h2></div></div>
<div class="hard-light"><div><h2>oxxo</h2></div></div>
<div class="soft-light"><div><h2>oxxo</h2></div></div>
<div class="difference"><div><h2>oxxo</h2></div></div>
<div class="exclusion"><div><h2>oxxo</h2></div></div>
<div class="hue"><div><h2>oxxo</h2></div></div>
<div class="saturation"><div><h2>oxxo</h2></div></div>
<div class="color"><div><h2>oxxo</h2></div></div>
<div class="luminosity"><div><h2>oxxo</h2></div></div>
<div class="plus-darker"><div><h2>oxxo</h2></div></div>
<div class="plus-lighter"><div><h2>oxxo</h2></div></div>

<!-- CSS 程式碼 -->
<style>
  div {
    position: relative;
    margin: 30px 5px 10px;
    border: 2px solid #000;
    width: 200px;
    height: 200px;
    float: left;
    background: repeating-linear-gradient(45deg,orange 0%,  orange 10%,cyan 10%, cyan 20%);
  }
  div::before {
    position: absolute;
    content: attr(class);
    top: -26px;
  }
  div div {
    margin: 0;
    border: none;
    background-size: cover;
    background-image: url("https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg");
  }
  h2 {
    margin: 0;
    padding: 100px 0 0;
    font-size: 70px;
    color: #fff;
    text-align: center;
    border-width: 2px 0;
  }
  .normal *{mix-blend-mode: normal;}
  .multiply *{mix-blend-mode: multiply;}
  .screen *{mix-blend-mode: screen;}
  .overlay *{mix-blend-mode: overlay;}
  .darken *{mix-blend-mode: darken;}
  .lighten  *{mix-blend-mode: lighten;}
  .color-dodge *{mix-blend-mode: color-dodge;}
  .color-burn *{mix-blend-mode: color-burn;}
  .hard-light *{mix-blend-mode: hard-light;}
  .soft-light *{mix-blend-mode: soft-light;}
  .difference *{mix-blend-mode: difference;}
  .exclusion *{mix-blend-mode: exclusion;}
  .hue *{mix-blend-mode: hue;}
  .saturation *{mix-blend-mode: saturation;}
  .color *{mix-blend-mode: color;}
  .luminosity *{mix-blend-mode: luminosity;}
  .plus-darker *{mix-blend-mode: plus-darker;}
  .plus-lighter *{mix-blend-mode: plus-lighter;}
</style>

isolation 限制图像混合范围

在默认状态下套用 mix-blend-mode 之后，“所有被覆盖的元素”都会一起套用上方元素的图像混合效果，然而透过 CSS 的 isolation 样式属性，可以“将混合范围限制在某个元素里”，在这个元素之外的内容都不会被图像混合所影响，isolation 默认属性值为 auto，改成 isolate 之后，混合模式就只会影响这个元素里的子元素。

下方范例的第一个 div 因为没有设定 isolation，图像混合的效果会影响到背景的斜线，在原本的图片中也会看见背景的斜线与文字，而第二个 div 因为设定了 isolation:isolate，混合效果就不会影响背景的斜线，只会集中在子元素的图片。

线上展示：https://codepen.io/oxxo/pen/xbKpWGG

<!-- HTML 程式碼 -->
<div>
  <h2>oxxo</h2>
  <div class="a">
    <img src="https://steam.oxxostudio.tw/download/css/mask-demo-01.png">
    <img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
  </div>
</div>
<div>
  <h2>oxxo</h2>
  <div class="b">
    <img src="https://steam.oxxostudio.tw/download/css/mask-demo-01.png">
    <img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
  </div>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 10px;  
    background: repeating-linear-gradient(45deg,orange 0%,  orange 10%,cyan 10%, cyan 20%);
  }
  div div{
    margin: 0;
    background: none;
  }
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    mix-blend-mode: difference;
  }
  h2{
    position: absolute;
    margin: 0;
    font-size: 120px;
    color: yellow;
  }
  .b {isolation: isolate;} /* 限縮範圍在 .b 裡 */
</style>

文字与背景反差效果

运用 mix-blend-mode 的方式，也可以很简单的实现“文字与背景的反差”效果，下方范例将“白色文字”的混合模式设定为 difference，就能让后方背景出现差异化的颜色。

线上展示：https://codepen.io/oxxo/pen/OPVZaRW

<!-- HTML 程式碼 -->
<div class="a"><h2>APPLE</h2></div>
<div class="b"><h2>BANANA</h2></div>
<div class="c"><h2>ORANGE</h2></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: max-content;
    border: 2px solid #000; 
  }
  div h2 {
    margin: 0;
    line-height: 1;
    font-size: 100px;
    font-family: impact;
    mix-blend-mode: difference;
    color: #fff;
  }
  .a {background: linear-gradient(black 50%, white 50%);}
  .b {background: linear-gradient(red 50%, green 50%);}
  .c {background: linear-gradient(yellow 50%, blue 50%);}
</style>

小结

自从浏览器开始支援 CSS mix-blend-mode 之后，有些网站的 banner 或特效都开始利用 mix-blend-mode 进行图像混合，如此不仅可减少图像软件的辅助，在进行网站更新时也更为方便。

意见反馈