mix-blend-mode?是 CSS 的一個屬性，用于控制元素的內容（如文本、圖像、背景等）如何與其?父元素?或?背景?進行混合。它類似于圖形設計軟件（如 Photoshop）中的圖層混合模式，可以實現各種視覺效果；

| 值 | 效果 |  
|----|------|  
| `normal` | 默認值，不混合 |  
| `multiply` | 正片疊底（變暗） |  
| `screen` | 濾色（變亮） |  
| `overlay` | 疊加（增強對比） |  
| `darken` | 取較暗的部分 |  
| `lighten` | 取較亮的部分 |  
| `color-dodge` | 顏色減淡（增強亮度） |  
| `color-burn` | 顏色加深（增強暗部） |  
| `hard-light` | 強光（類似 `overlay`，但更強烈） |  
| `soft-light` | 柔光（類似 `overlay`，但更柔和） |  
| `difference` | 差值（反色效果） |  
| `exclusion` | 排除（類似 `difference`，但對比度更低） |  
| `hue` | 保留色相，混合飽和度和亮度 |  
| `saturation` | 保留飽和度，混合色相和亮度 |  
| `color` | 保留色相和飽和度，混合亮度 |  
| `luminosity` | 保留亮度，混合色相和飽和度 |  

 // 文字與背景混合(效果：文字會根據背景顏色動態調整，增強對比度。)
<div class="background"><p class="text">混合模式效果</p>
</div><style>
.background {background: url('image.jpg');width: 300px;height: 200px;
}.text {color: white;font-size: 24px;mix-blend-mode: overlay; /* 文字與背景疊加 */
}
</style>

 // 圖片混合(效果：兩張圖片會以 multiply 模式混合，暗部加深)
<div class="container"><img src="image1.jpg" class="image1"><img src="image2.jpg" class="image2">
</div><style>
.container {position: relative;
}.image1 {position: absolute;width: 100%;
}.image2 {position: absolute;width: 100%;mix-blend-mode: multiply; /* 兩張圖片正片疊底混合 */
}
</style>

 // 與背景色混合  效果：如果父元素背景是白色，difference 會反轉顏色（紅色 → 青色）)<div class="box"></div><style>
.box {width: 200px;height: 200px;background: red;mix-blend-mode: difference; /* 與父元素背景混合 */
}
</style>

• 創意文字效果（如文字與背景融合）。
• 圖片特效（如雙重曝光、顏色疊加）。
• UI 設計（如按鈕懸停混合效果）。