混合模式

雙色調是攝影中常見的色彩處理方式,可讓圖片看起來只有兩種對比色彩:一種是亮部,另一種是暗部。不過,您該如何使用 CSS 做到這一點?

您可以使用混合模式和其他已學習的技巧 (例如濾鏡擬元素),將此效果套用至任何圖片。

什麼是混合模式?

混合模式通常用於 Photoshop 等設計工具,藉由混合兩個或更多圖層的顏色,創造合成效果。只要變更顏色混合方式,就能創造出非常有趣的視覺效果。您也可以將混合模式做為公用程式使用,例如將白色背景的圖片分離出來,讓圖片看起來有透明背景。

您可以使用 mix-blend-modebackground-blend-mode 屬性,在設計工具中使用 CSS 提供的大部分混合模式。mix-blend-mode 會將混合效果套用至整個元素,而 background-blend-mode 會將混合效果套用至元素的背景。

如果元素上有多個背景,且您希望這些背景彼此混合,請使用 background-blend-mode

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

混合模式分為兩類:可分離和不可分離。可分離的混合模式會個別考量每個顏色元件 (例如 RGB)。非可分離式混合模式會同等考量所有顏色元件。

瀏覽器相容性

mix-blend-mode

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 32.
  • Safari: 8.

Source

background-blend-mode

Browser Support

  • Chrome: 35.
  • Edge: 79.
  • Firefox: 30.
  • Safari: 8.

Source

可分離的混合模式

一般

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

相乘

multiply 混合模式就像將多個透明度堆疊在一起。白色像素會顯示為透明,黑色像素則會顯示為黑色。介於兩者之間的任何值都會乘以亮度 (光線) 值。這表示燈光會變得更亮和更暗,通常會產生較暗的結果。

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

螢幕

使用 screen 會將light 值相乘,這與 multiply 的效果相反,通常會產生較亮的結果。

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

重疊廣告

這個混合模式 overlay 會結合 multiplyscreen。深色底色會變得更深,淺色底色則會變得更淺。中間色彩 (例如 50% 灰色) 不會受到影響。

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

調暗

darken 混合模式會比較來源圖片和背景圖片的深色亮度,並選取兩者中較深的顏色。這項作業會比較每個色彩管道的 rgb 值,而非亮度 (multiplyscreen 會比較亮度)。使用 darkenlighten 時,通常會透過這個比較程序建立新的顏色值。

.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;
}

排除條件

使用 exclusiondifference 非常相似,但不會為相同的像素傳回黑色,而是傳回 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;
}

光度

最後,luminositycolor 的倒數。這個函式會使用來源色彩的亮度,以及背景色彩的色相和飽和度,建立顏色。

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

isolation 屬性

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 8.

Source

如果您將 isolation 屬性設為 isolate 值,系統就會建立新的堆疊內容,這會防止堆疊內容與背景層混合。如同您在 z-index 單元中所學,建立新的堆疊內容時,該層會成為基礎層。這表示父項層級的混合模式將不再套用,但已設定 isolation: isolate 的元素內部元素仍可混合。

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

進行隨堂測驗

測驗您對混合模式的瞭解

下列哪些是 CSS 混合模式?

調亮
Dullen
相乘
重疊廣告
調亮
差值

如要以不同方式混合不同顏色,您需要哪種樣式的混合模式?

不可分離
可分離