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
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
使用 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 混合模式?
如果你想以不同的方式混合不同顏色,則需要哪一種混合模式?