CSS保健室｜background-blend-mode

background-blend-mode

CSS 也可以運用多種混合模式呈現不同視覺效果，可以把 background-blend-mode 想像成是一台蔬果榨汁機，你加入的食材會決定果汁最後的顏色，開關打開了，你快一起過來看看！

cover

目前 IE 瀏覽器不支持 background-blend-mode 屬性。

background-blend-mode 這一個 CSS 屬性是針對 背景圖片 的混合模式，所以並不會影響畫面中其他物件色彩，可以是背景圖片與背景圖片的混合，也可以是背景圖片和背景色的之間的混合。
background-blend-mode 是應用在單個元素的背景之間（ background 裡面），它還支持多背景混合，可以把 background 想像是一台果汁機，只會攪和機器內的食物，不會被外面的一切干擾到，而 mix-blend-mode 則是應用於多個元素，除背景外，元素內的文字等其他內容也會被混合。

background-blend-mode
（圖片來源）

上圖是 PS 中的混合模式，數量比 CSS 中的多出幾個，但 CSS 已經能夠在各種不同的模式中演算出多達 16 種效果，如上圖粉紅色的字。

background-blend-mode 及 mix-blend-mode 這兩種混合模式的值是相同的。

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, no-repeat;
  background-image: url("fish.png"), url("wood.png");
  background-position: center;
  background-blend-mode: 
      normal | multiply | screen | overlay | 
      darken | lighten | color-dodge | color-burn | 
      hard-light | soft-light | difference | exclusion | 
      hue | saturation | color | luminosity;
}

下面有 木紋 和 魚 兩張圖的混合模式範例：

值	描述	範例
normal （一般）	為屬性預設的值，沒有被混合只選擇上層圖層的顏色。
multiply （色彩增值）	將背景以及來源色彩（上層圖片）的顏色相乘，並替換掉原本的顏色，結果色會比來源色或目標色暗。將任何色與黑色相乘結果為黑色，將任何色與白色相乘則維持原來的顏色。
screen （濾色）	將背景以及來源色的補值相乘，得到補色相乘的結果，結果色會比背景或來源色還要亮。將任何色過濾白色得到白色；將來源色過濾黑色則結果不變。效果近似於將好幾個投影片投影在單一個投影幕上。
overlay （覆蓋）	相乘或過濾顏色，取決於背景的顏色值。當來源色過濾背景時保留原本的強光以及陰影，背景顏色並非被取代，而是與來源色混合展現背景的亮部或暗部。
darken （變暗）	保留背景以及來源色彩中較暗的色彩。背景會與來源色彩中較暗的顏色混合。
lighten （變亮）	保留背景以及來源色彩中較亮的顏色。背景會與來源色彩中較亮的顏色混合。
color-dodge （加亮顏色－減淡）	將背景加亮來展現來源色。如果背景為黑色則不會有任何改變。
color-burn （加深顏色）	減低背景色亮度反映出來源色。如果背景為白色則不會有任何改變。
hard-light （實光）	將顏色相乘或過濾，取決於來源色的顏色值。效果近似於強烈的聚光燈照在背景圖片上。
soft-light （柔光）	將顏色加深或加亮，取決於來源色的顏色值。效果近似於漫射的聚光燈照在背景圖片上。
difference （差異化）	用亮色減去兩個來源色中的深色。如果背景為白色則為反轉色，背景為黑色則不會有任何改變。
exclusion （排除）	效果近似於差異化但對比度較低。
hue （色相）	用來源色的色相創造出另一個顏色，結合背景原來的飽和度及亮度。
saturation （飽和度）	用來源色的飽和度創造出另一個顏色，結合背景原來的飽和度及亮度。如果背景為灰階（無飽和度）的狀態下則不會有任何效果。
color （顏色）	用來源色的色相以及飽和度創造出另一個顏色，結合背景原來的亮度。保留了背景的灰階，且對於單色圖像的色彩化或是圖像的著色很有幫助。
luminosity （明度）	用來源色的明度創造出另一個顏色，結合背景原來的色相及飽和度。這與顏色模式的效果正好相反。