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
,因為背景屬性已經隔離。
隨堂測驗
測驗您對混合模式的相關知識
下列何者是 CSS 混合模式?
如果想以不同方式混合不同顏色,需要哪一種混合模式?