background-blend-mode 不起作用是因为 background-color 和 background-image 分离声明，二者属于不同渲染阶段，必须合并为同一 background 声明中逗号分隔的图层才能混合；推荐用 linear-gradient 替代纯色，并注意图层顺序与透明度范围。
background-blend-mode 不起作用，是因为你写的 background-color 和 background-image 是分离声明的——浏览器根本不把它们当“可混合的两层”，而是按绘制阶段硬叠：颜色是底层填充，图片是上层覆盖。真正能混合的，必须是同一 background 声明里、用逗号分隔的多个图像型图层。
为什么 background-color + background-image 一定不混合
这不是你写错值，是浏览器渲染模型决定的：background-color 属于“背景填充阶段”，background-image 属于“纹理叠加阶段”，二者不在同一图层栈里，background-blend-mode 根本收不到指令。
- 写成
background-color: rgba(0,0,0,0.4); background-image: url(bg.jpg);→ 混合模式被完全忽略 - 哪怕加了
background-blend-mode: multiply;，只要没合并进一条background声明，就无效 - 旧版 Safari（≤15.3）连属性本身都不解析，直接 fallback 到默认覆盖行为
必须用 linear-gradient(rgba) 替代 background-color
要把“颜色”变成浏览器认可的图像图层，唯一可靠方式是包装成单色渐变：linear-gradient(rgba(...), rgba(...))。它视觉等效，但语法合法，能参与混合。
- 正确写法：
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(bg.jpg); - 千万别写
linear-gradient(transparent, rgba(0,0,0,0.4))—— 这会导致边缘过渡不均、发虚 - 透明度建议卡在
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 端被父级样式意外裁剪，或者渲染管线降级导致色彩空间转换失真。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
