background-color与background-image直连无效，因颜色是底层画布而非图层；须用linear-gradient(rgba)将颜色升格为图像层，再与图片同层叠加并支持混合模式。
background-color 与 background-image 直接连用，颜色层根本不会参与叠加计算——它被浏览器当成“画布底色”，不是图层。所谓“色彩冲突”，其实是颜色压根没露出来。
为什么 background-color + background-image 总是失效
浏览器渲染时，background-color 是独立于背景图层栈之外的底层填充，而 background-image 是上层纹理；二者不构成可混合的“图层对”。哪怕你写了 background-color: rgba(0,0,0,0.4)，只要它没被包装成图像型背景（比如渐变），就永远被图片盖死。
- 写成两行：先
background-color后background-image→ 颜色完全不可见 - 用
background简写但漏掉颜色层：比如只写background: url(...)→background-color不进图层栈，background-blend-mode也无效 - 旧版 Safari（≤15.3）会直接忽略整条
background-blend-mode声明，连 warning 都不报
必须用 linear-gradient(rgba) 替代 background-color
把颜色“升格”为图像层，才能和图片同级叠加、支持混合模式。关键不是加透明度，而是换层类型。
- 正确写法：
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(bg.jpg) - 别用
transparent开头或结尾，例如linear-gradient(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 规则、或要兼容 Safari ≤15.3 时，::before 是唯一不踩坑的选择。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
position: relative，伪元素绝对定位铺满：top: 0; left: 0; width: 100%; height: 100% - 遮罩层用
background-color: rgba()，绝不用opacity（否则子元素一起变透明） - 文字内容加
position: relative; z-index: 1，确保浮在遮罩之上 - 调试时先关掉
overflow: hidden或clip-path——它们会无声截断渐变透明端，让衔接又变硬
最容易被忽略的是：渐变蒙版的 transparent 端必须真正透出去，而不是被父级其他样式（比如 background-clip: padding-box）或祖先容器的 overflow 悄悄吃掉。这点在嵌套布局和响应式断点下尤其容易翻车。
