mix-blend-mode不能混合background-image，只作用于元素内容（如<img>）与其下方堆叠层；要调色相须用<img>+纯色背景+同层叠上下文，或改用background-blend-mode+hsla渐变叠加。
mix-blend-mode 不能用于混合背景图和色相——它根本不处理 background-image，只混合元素的“内容”（如 <img> 标签渲染的像素）与它下方堆叠的内容层。想调色相？得换思路。
mix-blend-mode: overlay / color / hue 对 background-image 完全无效
给一个 <div style="background-image: url(logo.png);"> 设置 mix-blend-mode: hue，结果一定是零反应。因为 background-image 属于元素自身的绘制层，不被视为“内容”，也不参与 mix-blend-mode 的合成管线。浏览器连计算都不会触发。
常见错误现象：
- 开发者工具里属性显示为“已启用”，但视觉毫无变化
- 换成
background-blend-mode: hue却生效了 → 这反而证明你原本用错了属性 - 把图片改成
<img src="logo.png">后，mix-blend-mode: hue突然起效 → 验证了“必须是内容元素”这一铁律
真想混合色相，必须用 <img> + 纯色背景 + 同 stacking context
要让一张图视觉上“染上”某种色相，得靠 <img> 和它背后的纯色块做混合，且必须满足三个硬性条件：
立即学习“前端免费学习笔记（深入）”；
-
<img>不能是background-image，必须是独立标签 - 它的父容器背景必须是单色（如
background-color: #ff6b6b），不能是渐变或多图层 - 父容器不能有
transform、filter、isolation: isolate或opacity: 0.99——这些都会切断 stacking context，让mix-blend-mode: hue彻底静音
示例结构有效：
<div style="background-color: #ff6b6b;"> <img src="icon.png" style="mix-blend-mode: hue;"> </div>
而下面这个写法一定失败：
<div style="background-color: #ff6b6b; transform: translateZ(0);"> <img src="icon.png" style="mix-blend-mode: hue;"> </div>
hue / saturation / color 模式在实际中极难控制
mix-blend-mode: hue 的行为依赖于底层颜色的亮度和饱和度分布，不是“一键上色”。它会提取背景色的色相，覆盖到图片每个像素上，但保留原图明度和饱和度 —— 这意味着：
- 白底图（如 PNG logo）会完全变成背景色的色相，但可能发灰或失真
- 深色区域因明度低，叠加后容易糊成一团，看不出色相变化
- 图片若有 Alpha 通道，半透明边缘会与背景色做复杂合成，结果不可预测
- iOS Safari 对
hue支持不稳定，某些版本直接降级为normal
更稳妥的做法：用 filter: hue-rotate(45deg) 直接旋色相，或导出预调色的 PNG/SVG；mix-blend-mode: hue 更适合实验性设计，而非生产环境控色。
真正能混合背景图色相的只有 background-blend-mode
如果你坚持要用背景图（比如 background-image: url(photo.jpg)）并叠加一层色相，唯一合法路径是：background-blend-mode + 多层背景声明：
.box {
background:
linear-gradient(hsla(200, 100%, 50%, 0.3), hsla(200, 100%, 50%, 0.3)),
url(photo.jpg);
background-blend-mode: hue;
}
注意关键点：
- 两层必须写在同一
background声明里，用逗号分隔 - 第一层是带透明度的色相渐变（不能只写
background-color） -
background-blend-mode: hue是作用于这两层之间的，不是对图片单独调色 - Safari 15.4+ 才稳定支持
hue，旧版 iOS 必须 fallback 到multiply或overlay
最容易被忽略的一点：所谓“混合色相”，从来不是直接操作图片本身，而是靠图层叠加时的数学运算间接达成。一旦混淆 mix-blend-mode 和 background-blend-mode 的作用域，调试时间会翻倍，且永远得不到预期效果。
