混合模式

CSS Podcast - 024: 混合模式

Duotone 是熱門的攝影色彩處理方式，讓圖片看起來像是兩種對比色：一種用於高亮度部分，另一種用於低光源。但該如何與 CSS 搭配運作？

使用混合模式以及您學到的其他技術，例如篩選器和虛擬元素，您可以將此效果套用至任何圖片。

什麼是混合模式？

Photoshop 等設計工具經常使用混合模式，以混用兩個以上圖層的色彩來建立組合效果。變更顏色組合的方式，即可創造非常有趣的視覺效果。 您也可以將混合模式當做公用程式使用，例如隔離具有白色背景的圖片，讓圖片看起來更透明。

您可以透過 mix-blend-mode 或 background-blend-mode 屬性，將設計工具中的多數混合模式與 CSS 搭配使用。mix-blend-mode 會為整個元素套用混合功能，background-blend-mode 則會套用與元素背景混合的混合功能。

當元素有多個背景，且希望這些元素彼此融合時，請使用 background-blend-mode。

mix-blend-mode 會影響整個元素，包括其虛擬元素。其中一個用途是雙色調圖片的初始範例，透過虛擬元素將色彩圖層套用至元素。

混合模式分為兩類：可區隔和不可分隔。可分的混合模式會個別考慮每個色彩元件 (例如 RGB)。不可分離的混合模式會將所有顏色元件都視為相等。

瀏覽器相容性

mix-blend-mode

background-blend-mode

可分離的混合模式

正常

這是預設的混合模式，且不會改變元素與其他元素的混合方式。

相乘效果

multiply 混合模式就像將多個透明度堆疊在一起。白色像素將顯示為透明 黑色像素將顯示為黑色介於兩者之間的任何值都會乘以亮度 (淺) 值。 這表示光源的亮度會偏淺、較暗，而且通常產生了較暗的成像結果。

.my-element {
  mix-blend-mode: multiply;
}

螢幕

使用 screen 會將「光源」值乘以 multiply 的反效果，在多數情況下通常會產生更加明亮的結果。

.my-element {
  mix-blend-mode: screen;
}

重疊

這個混合模式：overlay - 結合 multiply 和 screen。基本深色顏色會變深，基本淺色則會變亮。 中階顏色 (例如 50% 灰色) 則不受影響。

.my-element {
  mix-blend-mode: overlay;
}

調暗

darken 混合模式會比較來源圖片和背景幕圖片的暗色亮度，然後選取兩者中的最暗。做法是比較每個顏色管道的 rgb 值，而非亮度，例如 multiply 和 screen。使用 darken 和 lighten 時，通常會透過這個比較程序建立新的顏色值。

.my-element {
  mix-blend-mode: darken;
}

調亮

使用 lighten 與 darken 完全相同。

.my-element {
  mix-blend-mode: lighten;
}

顏色加亮

如果使用 color-dodge，系統會調亮背景顏色以反映來源顏色。純黑色是這個模式不會產生任何效果。

.my-element {
  mix-blend-mode: color-dodge;
}

色彩燃燒

color-burn 混合模式與 multiply 混合模式非常類似，但提高對比度，因此中色調較為飽和，並減少高亮度。

.my-element {
  mix-blend-mode: color-burn;
}

強光

使用 hard-light 可營造出鮮明的對比效果。這個混合模式可將亮度值設為螢幕或倍增亮度值。如果像素值低於 50% 灰色，圖片會變亮，就像經過螢幕處理一樣。如果顏色較低，則系統會將其乘以。

.my-element {
  mix-blend-mode: hard-light;
}

柔光

soft-light 混合模式是 overlay 的對比度較低版本。運作方式幾乎相同，但對比度較低。

.my-element {
  mix-blend-mode: soft-light;
}

差值

一張瞭解 difference 的運作方式有點像相片負面的運作方式。difference 混合模式會取用每個像素的差異值，反轉淺色。如果顏色值相同，就會變成黑色。系統會將值之間的差異反轉。

.my-element {
  mix-blend-mode: difference;
}

排除條件

使用 exclusion 與 difference 非常類似，但它不會針對相同的像素傳回黑色，而是會傳回 50% 的灰色，進而產生較柔和的對比度較低。

.my-element {
  mix-blend-mode: exclusion;
}

無法分離的混合模式

您可以把這些混合模式視為 HSL 顏色元件。每個 都會接收使用中圖層的特定元件值，並將其與其他元件值混合。

色調

hue 混合模式會採用來源顏色的色調，並將該色彩套用至背景色彩的飽和度和亮度。

.my-element {
  mix-blend-mode: hue;
}

飽和度

運作方式與 hue 類似，但使用 saturation 做為混合模式，會將來源色彩的飽和度套用至背景幕色彩的色調和亮度。

.my-element {
  mix-blend-mode: saturation;
}

顏色

color 混合模式會根據來源顏色的色調、飽和度和背景色彩的亮度建立顏色。

.my-element {
  mix-blend-mode: color;
}

光度

最後，luminosity 與 color 的相反。 這會建立採用來源色彩的亮度，以及背景色彩的色調和飽和度等顏色。

.my-element {
  mix-blend-mode: luminosity;
}

isolation 屬性

如果將 isolation 屬性設為 isolate 的值，該屬性會建立新的堆疊內容，防止其與背景圖層混合。如 Z-index 模組所述，當您建立新的堆疊結構定義時，該層會成為基本層。這表示系統不會再套用父項層級的混合模式，但具有 isolation: isolate 組合的元素內部元素仍然會融為一體。

請注意，這不適用於 background-blend-mode，因為背景屬性已經隔離。

隨堂測驗

測驗您對混合模式的相關知識