mix-blend-mode
上次講了 background-blend-mode ，這次換 mix-blend-mode ，一樣讓想像力變成超能力，把 mix-blend-mode 想成是一隻變色龍，不只背景，周遭的人事物都有可能會影響到牠，噓！走路小聲點不要嚇到牠了，接下來讓你更深入了解這個屬性！
（ 圖片來源 ）
目前 IE 瀏覽器不支持 mix-blend-mode 屬性。
mix-blend-mode 這種混合模式就如同 Photoshop 中的「 圖層混合模式 」，會與下層圖層的色彩進行混合，默認情況下是會混合所有比層疊順序低的元素，它是應用於多個元素，而且除背景外，元素內的文字等其他內容也會被混合，也可以這樣理解，它會把當前元素和所有在其下方重疊的背景或元素都混和起來。
background-blend-mode 是應用在單個元素的背景之間（ background 裡面 ）， 它還支持多背景混合，可以把 background 想像是一台果汁機，只會攪和機器內的食物，不會被外面的一切干擾到，而 mix-blend-mode 則是應用於多個元素，除背景外，元素內的文字等其他內容也會被混合。
mix-blend-mode 比較類似 opacity ，作用於一個元素的同時也會作用於這個元素的全部子元素，因此，如果不想要子元素內容也受到影響（ 就像設置半透明時可能希望裡面的文字仍是不透明的 ），改用 background-blend-mode 會更合適。
（ 圖片來源 ）
上圖是 PS 中的混合模式，數量比 CSS 中的多出幾個，但 CSS 已經能夠在各種不同的模式中演算出多達 16 種效果，如上圖粉紅色的字。
background-blend-mode 及 mix-blend-mode 這兩種混合模式的值是相同的。
HTML
<div>
<img src="img.jpg">
</div>
CSS
div {
background-color: navy;
padding: 20px;
}
div > img {
mix-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 （ 明度 ） |
用來源色的明度創造出另一個顏色，結合背景原來的色相及飽和度。 這與顏色模式的效果正好相反。 |
 |
使用 mix-blend-mode 製作文字背景圖
（ 圖片來源 ）
可以嘗試讓文字帶上漸變色，或者說讓文字透出圖片，當然這個效果有一些 CSS 屬性也可以完成，譬如 background-clip: text 背景裁剪就可以讓文字帶上漸變色或者展示圖片，而這裡是使用 mix-blend-mode ，只需要建構出黑色文字、白色底色的文字 div ，疊加上圖片，再運用 mix-blend-mode 即可，簡單原理如下：
HTML
<div class="container">
<div class="pic"><div class="text">IMAGE</div></div>
</div>
CSS
.pic {
position: relative;
width: 100%;
height: 100%;
background: url('flowers.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.text {
position: absolute;
width:100%;
height:100%;
color: #000;
mix-blend-mode: lighten;
background-color: #fff;
}
