background-blend-mode不能直接混合图片和背景色，只能混合同一background声明中的多图层；需将颜色转为linear-gradient伪图层才能生效，且图层顺序影响混合结果。
background-blend-mode 能否直接混合图片和背景色
不能直接用 background-blend-mode 混合一张图片和纯色背景——它只作用于同一个 background 声明里的多个图层（比如多张背景图、渐变 + 图片），不处理 background-color 与 background-image 的混合。
常见错误是写成这样，结果无效：
div {
background-color: #ff6b6b;
background-image: url("photo.jpg");
background-blend-mode: multiply; /* ❌ 不生效 */
}
正确做法是把颜色也转为一层渐变图层：
div {
background: linear-gradient(#ff6b6b, #ff6b6b), url("photo.jpg");
background-blend-mode: multiply;
background-size: cover;
}
-
linear-gradient(#ff6b6b, #ff6b6b)是等效于纯色的“伪图层”，才能参与混合 - 顺序很重要：第一个图层在最上，所以颜色层写在前面时，
multiply会让图片变暗；反过来写图片在前，则颜色层被图片“透出”影响 - 仅支持 Chrome、Firefox、Safari（iOS ≥13.4），IE 完全不支持
img 元素如何叠加颜色滤镜（非背景）
如果操作的是 标签本身（不是背景图），得靠 mix-blend-mode 或 filter，但两者行为完全不同：
立即学习“前端免费学习笔记（深入）”；
-
mix-blend-mode是让图片和它「下方的元素」混合（比如父容器背景、文字、其他兄弟元素），不是和自身背景混合 -
filter: opacity()或filter: brightness() contrast() hue-rotate()才是直接作用于图片像素的调整
例如想让图片泛红又半透明：
img {
filter: opacity(0.8) hue-rotate(-20deg) saturate(1.3);
}
注意：opacity 会同时降低整个元素的透明度（包括边框、文字等），若只想调图片内容，优先用 rgba() 颜色值或 background 方案。
