background-color 与 background-image 叠加会偏色，因浏览器不混合而硬盖；用 linear-gradient(rgba) 替代纯色、伪元素方案更可控，且需注意透明端不被裁剪。
直接用 background-color 叠 background-image 一定会偏色——这不是你调错值，而是浏览器压根没打算让它们“混合”，只是硬盖。
为什么 background-blend-mode 会让图片发灰或泛青
这不是 bug，是 multiply、screen 这类模式对 RGB 像素做数学运算时，天然会受图片原始色彩空间和 alpha 行为干扰。尤其当图片带嵌入 ICC 配置、或用了 background-attachment: fixed 触发合成层降级时，iOS Safari 和部分 Android WebView 会把混合结果算歪。
- 深图 +
screen→ 容易泛青（高光区过曝失真） - 浅图 +
multiply→ 整体发闷（暗部被过度压缩） - 哪怕写对了
background-color和background-image，只要其中一层隐含 alpha（比如 PNG 有透明通道），混合就不可控
用 linear-gradient(rgba) 替代 background-color 才真正可控
关键不是换 blend mode，是把“颜色”也变成图像层——只有同类型层才能稳定叠加。直接写 background-color: rgba(0,0,0,0.4) 永远无效，必须包装成渐变：
- 写法必须是：
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(bg.jpg); - 别用
transparent开头或结尾，例如linear-gradient(to top, transparent, rgba(0,0,0,0.4))会导致边缘过渡不均、发虚 - 若需方向感（比如文字在底部），改用带方向的写法：
linear-gradient(to top, rgba(0,0,0,0.5), transparent)，且必须把渐变放在url()前面 - 透明度建议卡在 0.2–0.6：低于 0.15 几乎不可见，高于 0.7 会吃掉图片纹理
伪元素方案比 background-blend-mode 更稳妥
当你需要动态控制透明度、或页面已有复杂 background 规则时，::before 是唯一不踩坑的选择：
立即学习“前端免费学习笔记（深入）”；
- 父容器设
position: relative，伪元素绝对定位铺满：top: 0; left: 0; width: 100%; height: 100% - 遮罩层用
background-color: rgba(...)，绝不用opacity（否则子元素一起变透明） - 文字内容加
position: relative; z-index: 2，确保浮在遮罩之上 - 调试时先关掉
overflow: hidden或clip-path——它们会悄悄截断渐变透明端，导致衔接又变硬
最容易被忽略的是：渐变蒙版的 transparent 端必须真正透出去，而不是被父级其他样式无声吃掉。真机上偏色，八成是渲染管线 fallback 或遮罩被意外裁剪，不是颜色值的问题。
