混合模式

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

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

什麼是混合模式?

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

設計工具中可用的混合模式,大多能夠與 CSS、 方法是使用 mix-blend-modebackground-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) - 結合 multiplyscreen。 底層深色會變暗,底色會加亮。 中階色彩 (例如 50% 灰色) 則不受影響。

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

調暗

darken 混合模式會比較來源圖片和背景幕圖片的深色亮度 然後選取兩者中最暗的 做法是比較 RGB 值,而不是亮度 (例如 multiplyscreen)。 每種色彩管道的呈現效果 在 darkenlighten 中,系統通常會透過這項比較程序建立新的顏色值。

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

排除條件

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

瀏覽器支援

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

資料來源

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

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

隨堂測驗

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

下列哪些是 CSS 混合模式?

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

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

不可分離
可分割