CSS 影像混合模式 mix-blend-mode

過去要製作「影像混合」效果時，都得動用影像處理軟體協助修圖，現在透過 CSS 的 mix-blend-mode 影像混合模式，可以直接在瀏覽器中輕鬆實現前後影像混合的效果，這篇教學會展示 mix-blend-mode 樣式屬性的 multiply、screen、overlay、darken、lighten 等有趣的影像混合效果，以及介紹利用 isolation 限制影像混合的範圍。

快速導覽：

• 使用影像混合模式 mix-blend-mode
• mix-blend-mode 效果展示
• isolation 限制影像混合範圍

使用影像混合模式 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>

小結

自從瀏覽器開始支援 CSS mix-blend-mode 之後，有些網站的 banner 或特效都開始利用 mix-blend-mode 進行影像混合，如此不僅可減少影像軟體的輔助，在進行網站更新時也更為方便。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～