关键在于用带透明度的 linear-gradient 叠加半透色而非纯色，如 rgba(0,0,0,0.4)，透明度宜选 0.2–0.6；可依图文位置设方向渐变，配合 background-blend-mode（如 multiply）及 background-size: cover 等确保融合自然。
直接给背景图片加纯色会显得生硬，关键在于用 linear-gradient 叠加一层半透明色，让颜色自然“渗入”图像，而不是盖在上面。
用 rgba 实现柔和叠加
不要用 solid 颜色（如 #000 或 black），改用带透明度的 rgba 值作为渐变色。例如：
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(bg.jpg);
这样整层是均匀半透黑，压暗图片同时保留细节。透明度建议控制在 0.2–0.6 之间，太低不明显，太高盖住内容。
方向渐变增强层次感
单色叠加容易呆板，换成有方向的渐变，能引导视觉、匹配图文布局：
立即学习“前端免费学习笔记（深入）”；
- 文字在下方？用
linear-gradient(to top, rgba(0,0,0,0.5), transparent) - 标题靠左？用
linear-gradient(to right, rgba(0,0,0,0.4), transparent 70%) - 想营造光影感？叠加两个方向：
linear-gradient(135deg, rgba(0,0,0,0.1), transparent 50%), linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.1))
配合 background-blend-mode 微调融合度
如果图片本身明暗不均，可尝试开启混合模式（注意兼容性）：
background: url(bg.jpg), linear-gradient(#000, #000);
background-blend-mode: multiply;
常用值：multiply（加深融合）、overlay（保细节）、soft-light（更柔和）。慎用 screen，易发灰。
别忘了设置 background-size 和 position
融合失效常因图片拉伸变形或错位。务必显式声明：
-
background-size: cover;—— 确保填满且比例正常 -
background-position: center;—— 防止重点区域被裁 -
background-repeat: no-repeat;—— 避免平铺干扰渐变效果
基本上就这些。核心是把颜色当“滤镜”用，而不是“盖子”。