background-color 与 background-image 直接连用显生硬，因二者为硬叠层无过渡；应改用带方向的 linear-gradient（如 to top）作渐变蒙版，并置于 background 属性中图片之前；伪元素遮罩更可控，需注意 overflow/clip-path 截断透明区。
background-image 和 background-color 直接连用为什么显得生硬
因为浏览器把 background-color 当作纯色底层、background-image 当作不透明图层直接叠上去，中间没有过渡区域。哪怕你写了 rgba(0, 0, 0, 0.4) 作背景色，它也只是一整块均匀半透色，和图片边缘之间仍是“一刀切”，缺乏视觉缓冲。人眼会本能识别出这种硬边，尤其在浅色文字或高对比区域更明显。
用 linear-gradient 模拟渐变蒙版才是正解
核心不是加一层色，而是加一层“有纵深感”的色——让颜色从透明到半透、从边缘向中心自然渗入。关键写法是：
- 不用单色
linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4))（这是均匀覆盖，仍生硬） - 改用带方向的渐变，例如：
linear-gradient(to top, rgba(0,0,0,0.5), transparent)（底部深、向上变透明） - 若文字在右侧，就用
linear-gradient(to left, rgba(0,0,0,0.4), transparent 70%) - 务必把渐变写在
background属性里，且放在图片前面：background: linear-gradient(...), url(...);
background-blend-mode 能救但别乱用
background-blend-mode 只对同一 background 声明里的多层生效，比如 linear-gradient() + url() 这种组合。常见误区：
- 单独写
background-image: url(...); background-color: rgba(...);→background-blend-mode完全无效 - 用了
screen模式后图片发灰 → 改用multiply（压暗保细节）或overlay（更中性） - IE 不支持 → 如果必须兼容，退回到伪元素遮罩方案
伪元素遮罩比直接改 background 更可控
当渐变蒙版方向复杂、或需要独立控制透明度/动画时，::before 是更稳妥的选择：
- 给容器设
position: relative，再用::before绝对定位铺满 - 遮罩层用
background-color: rgba(...)，别用opacity（否则子元素也变透明） - 文字内容需加
position: relative; z-index: 2确保浮在遮罩之上 - 如果遮罩要动（比如 hover 时淡入），直接 transition
background-color或opacity（此时只影响伪元素本身）
transparent）必须真正“透”——不能被父级其他样式意外截断，比如 overflow: hidden 或 clip-path 会悄悄吃掉透明过渡区。调试时先临时关掉这些属性，确认蒙版效果完整再逐步加回。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
