混合模式

CSS Podcast - 024：混合模式

Duotone 是常見的攝影色彩處理技術 換句話說，它只由兩種對比色組成： 分別是用於高亮度和低光源環境 但 CSS 會如何與 CSS 搭配運作？

運用混合模式和其他技巧 例如篩選器和 虛擬元素：您可以將這個效果套用至任何圖片。

什麼是混合模式？

混合模式經常用於 Photoshop 等設計工具 混合兩個或多個圖層的顏色，來產生構圖效果。 你可以變更顏色組合方式，創造有趣的視覺效果。 你也可以使用混合模式 例如區隔背景為白色的圖片 表示背景為透明

設計工具中可用的混合模式，大多能夠與 CSS、 方法是使用 mix-blend-mode 或 background-blend-mode 資源。 mix-blend-mode 會將混合套用至整個元素 background-blend-mode 會將混合套用至元素背景。

如果元素有多個背景，請使用 background-blend-mode 希望這些元素可以完美融入其中

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

混合模式分為兩種：可分隔和不可分離。 可區分的混合模式會將每個色彩元件納入考量 例如 RGB 不可分離的混合模式會平均考量所有色彩元件。

瀏覽器相容性

mix-blend-mode

瀏覽器支援

  • Chrome：41.
  • Edge：79，
  • Firefox：32。
  • Safari：8.

資料來源

background-blend-mode

瀏覽器支援

  • Chrome：35.
  • Edge：79，
  • Firefox：30。
  • Safari：8.

資料來源

可分隔的混合模式

一般

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

相乘

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

使用 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 屬性

瀏覽器支援

  • Chrome：41.
  • Edge：79，
  • Firefox：36。
  • Safari：8.

資料來源

如果將 isolation 將屬性值設為 isolate 這樣就能建立新的堆疊情境 這樣就不會與背景圖層混合 正如 Z-index 模組所學，當您建立新的堆疊內容時， 該層會成為基礎層 也就是說，父項層級的混合模式將不再套用。 不過，如果元素設定了 isolation: isolate，則元素中的元素可以「保持」混合。

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

隨堂測驗

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

下列哪些是 CSS 混合模式？

差值
🎉
Lighten
🎉
調亮
請再試一次！
Dullen
請再試一次！
相乘
🎉
重疊廣告
🎉

如果你想以不同的方式混合不同顏色，則需要哪一種混合模式？

可分割
這些混合模式提供色彩聲道指定效果
不可分離
請再試一次，無法分隔不同頻道沒有顏色聲道