強大的混合模式 Blend Modes
關於「混合模式」的基本介紹及實作範例請參考前文👉[CSS] 混合模式應用-產品動態選色，本篇不再一一說明。
透過 CSS 混合模式的應用，讓我們可以直接在網頁的元素上”加工 “，輕鬆的創造出特殊的視覺效果，尤其在圖片的處理上，甚至可以不用仰賴圖片編輯軟體，僅僅使用 Blend Modes 就能夠產生有趣的色彩疊加變換，如此一來也有助於我們減少使用大量圖片及引入外部資源的需求。
▎效果
參考下方👉 Background Blend Mode — Front End Center 範例，請嘗試點擊左側選單（右上至下為：前景圖、透明度、灰階及混合模式），可查看不同模式之間的變化。
熟悉 photoshop 的朋友不難發現， 其中混合模式的屬性值其實就是 PS 的混合模式，運用概念也是一樣的，不得不說 Blend Modes 實在是太強大了。
# 屬性值
darken 變暗 | multiply 色彩增值 |color-burn 加深顏色
lighten 變亮 |screen 濾色 |color-dodge 加亮顏色
overlay 覆蓋 |soft-light 柔光 |hard-light 實光
difference 差異化 |exclusion 排除
hue 色相 |saturation 飽和度 |color 顏色 |luminosity 明度
# 屬性值詳細說明可參考 Adobe Photoshop 中的混合模式
＃混合+形狀
➜ 應用：Logo 動畫，圖形疊色搭配上俏皮的動畫效果，讓人印象深刻。
➜ 應用：Icon
＃混合+光標
➜ 應用：互動式鼠標
