核心機制：Overlay（疊加）模式的數學本質

Overlay = Multiply（正片疊底）暗部 + Screen（滤色）亮部。50% 灰為分水嶺：基底層 > 50% 灰 → 變亮（滤色）；< 50% 灰 → 變暗（正片疊底）。純黑/純白保持不變。這使其成為非破壞性增強對比度、增加質感、營造光影的萬能圖層。

案例一：圖標設計——提升飽和度與立體質感

任務：復古圓形金色座椅圖標

1. 基礎漸變：角度漸變構建金屬基調。
   
2. 疊加增強：復制圖層 → 模式改為 Overlay → 整體飽和度提升、高光更亮、陰影更深、金屬質感躍然「屏」上。
   
3. 邊緣高光：新建圖層，柔邊白筆刷繪製邊緣高光 → Overlay → 邊緣發光感自然融合。
   

技巧：不滿意基礎漸變時，Overlay 圖層可作為「非破壞性修飾層」快速迭代，避免重繪基礎層。

案例二：Logo 設計——賦予扁平圖形「鼓出」質感與年代感

1. 垂直漸變疊加：紅色 Logo 上疊加「黑→白」垂直漸變圖層 → Overlay + 調整不透明度 → 偽造 3D 凸起視覺。
   
2. 做舊筆刷疊加：Overlay 模式下繪製噪點/劃痕筆刷 → Logo 瞬間擁有「歷史痕跡」質感。
   
   

此法極適用於按鈕、圖標、Logo 等小尺寸高精度元件。

案例三：網頁背景場景構建——低成本打造電影級氛圍

1. 素材準備：尋找契合主題的高清圖片（如西班牙古堡）。
   
2. 去色 + Overlay：通道混合器去色 → 圖層模式改 Overlay → 圖片融入背景色調，形成低調陰郁基調。
   
3. 氛圍疊加：不規則做舊筆刷（Overlay 模式）豐富紋理層次。
4. 前景元素融合：氣球原圖 → 疊加深藍色塊圖層（Overlay） → 氣球自動攝取環境色，完美融入場景。
   
   

擴展：混合模式家族速查表

分組	模式	核心效果	典型用途
正片疊底組	Multiply	變暗，保留暗部細節	陰影、紋理疊加、線稿上色
	Color Burn	加深對比，增加飽和度	戲劇性陰影、燒邊效果
	Linear Burn	線性變暗，對比更強	強力陰影、曝光補償
滤色組	Screen	變亮，保留亮部細節	高光、光效、煙霧、去黑底
	Color Dodge	減淡對比，極亮發光	強光、魔法特效、發光邊緣
	Linear Dodge	線性變亮	柔光疊加、HDR 合成
對比組	Overlay	對比度 S 型增強，中性灰透明	質感增強、光影塑造、非破壞修圖
	Soft Light	柔和 Overlay	微調光影、柔和質感
	Hard Light	強烈 Overlay	強對比質感、劇烈光影
	Vivid Light	極致對比	藝術特效、誇張風格
差值組	Difference	像素差值，反色效果	對齊檢查、特效、文字反色
	Exclusion	低對比度差值	柔和反色、復古風格
色彩組	Hue/Saturation/Color/Luminosity	分通道替換	換色、黑白著色、亮度獨立調整

Web 端落地：CSS `mix-blend-mode` 與 `background-blend-mode`

現代瀏覽器原生支援混合模式，可直接在 CSS 中實現上述效果，零圖片、可動態、響應式、可動畫：

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(255,255,255,.4), transparent);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hero {
  background-image: url(castle.jpg), linear-gradient(#1a0d2e, #0d0817);
  background-blend-mode: overlay, normal;
}

混合模式是設計師的「魔法畫筆」，亦是前端工程師的「性能利器」。掌握其數學本質，靈活組合，能以極低成本產出極高視覺質感的介面。