mix-blend-mode 是一个强大的 CSS 属性，用于控制一个元素的内容如何与它背后的内容混合显示，效果类似 Photoshop 的图层混合模式，常用于图片叠加、文字反色、动态视觉效果等场景。
🎨 常用 mix-blend-mode 取值与效果说明：
| 值 | 中文含义 | 效果描述 | 场景示例 |
|---|---|---|---|
normal | 正常 | 默认效果，无混合 | 不需要混合时用 |
multiply | 正片叠底 | 颜色相乘，变暗 | 图片暗化、水墨效果 |
screen | 滤色 | 颜色反乘，变亮 | 高光、投影感 |
overlay | 覆盖 | 综合 multiply 和 screen，高对比 | 按钮悬停、视觉增强 |
darken | 变暗 | 显示较暗部分 | 图标与背景融合 |
lighten | 变亮 | 显示较亮部分 | 内容提亮处理 |
color-dodge | 颜色减淡 | 提高亮度，对比强烈 | 发光效果、火焰 |
color-burn | 颜色加深 | 提高暗部对比 | 烧焦感、深色强化 |
hard-light | 强光 | 强烈高对比（乘或滤色） | 聚光灯、聚焦 |
soft-light | 柔光 | 柔和对比 | UI 明暗过渡 |
difference | 差值 | 反色，颜色差异大时最明显 | 自动字体对比 |
exclusion | 排除 | 类似 difference，反差更小 | 柔和反色 |
hue | 色相 | 采用混合色的色相，保留背景亮度/饱和度 | 滤镜、换色 |
saturation | 饱和度 | 使用混合色的饱和度 | 控制鲜艳程度 |
color | 颜色 | 使用混合色的色相+饱和度，保留亮度 | 统一色调风格 |
luminosity | 亮度 | 使用混合色的亮度，保留背景色相/饱和度 | 灯光投射效果 |
🖼️ 可视化示例（解释）
假设背景是蓝色块，前景是红色文字或图像：
multiply：蓝色与红色叠加会变为深紫色screen：颜色变浅（提亮）difference：如果背景是白色，前景变黑；背景黑色，前景保持原样（自动反色效果）overlay：深色区域更暗，亮色区域更亮
✅ 实用案例
自动对比色文字（dark/light背景都能看清）：
.text {
color: white;
mix-blend-mode: difference;
}高亮图片叠加：
.highlight {
mix-blend-mode: screen;
}暗调融合特效：
.fog-layer {
mix-blend-mode: multiply;
}🔥 兼容性提示
- 大多数现代浏览器都已支持（Chrome, Edge, Safari, Firefox）
- 在移动端支持略弱（低版本浏览器可能不支持）
mix-blend-mode不作用于透明背景（要有背景图/色）