背景图文字不清主因是明暗对比不足，应优先使用linear-gradient叠加半透明色块“托底”关键区域，而非全图加黑；可单渐变定向控制（如to top）、双渐变错层营造立体感，或配合background-blend-mode实现柔光融合。
背景图上文字或内容看不清，通常不是图不够亮，而是图和文字之间缺乏足够的明暗对比。直接加一层纯色遮罩容易让图片失去细节，用 linear-gradient 叠加半透明色块，既能保留图像质感，又能精准控制明暗过渡区域，是更自然、更可控的解决方案。
用渐变色块“托底”关键内容区
如果标题、按钮等重要元素集中在图片某一部分（比如底部或右侧），可以只在该区域叠加渐变，避免全图压暗：
- 写法示例：background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 70%), url(bg.jpg); —— 从下往上渐变，底部深、顶部透，文字放底部就清晰了
- 方向可灵活调整：to right（左→右）、to bottom（上→下），匹配内容布局
- 透明度别设太高（如 rgba(0,0,0,0.8)），否则图像细节被吃掉；建议从 0.3–0.6 区间试起
双渐变叠加：兼顾层次与呼吸感
单层渐变有时仍显生硬。可叠加两个方向不同的半透渐变，模拟自然光影：
- 示例：background: linear-gradient(135deg, rgba(0,0,0,0.2), transparent), linear-gradient(45deg, rgba(0,0,0,0.15), transparent), url(bg.jpg);
- 第一个渐变定主调（如左下到右上压暗角落），第二个微调反向（如左上到右下提亮中心），视觉更立体
- 注意两个渐变的透明度要错开，避免叠加后局部过重
配合 background-blend-mode 做柔和融合
如果希望颜色与图片产生类似“柔光”“叠加”的混合效果，而非简单遮盖，可尝试混合模式：
立即学习“前端免费学习笔记（深入）”；
- 先写两层背景：一层纯色（如 #000），一层图片；再加 background-blend-mode: multiply;
- 常用值：multiply（加深）、overlay（增强对比）、soft-light（柔和提亮）
- 注意：此方法对图片明暗敏感，偏亮图用 multiply 效果弱，可换 overlay 或降低纯色层透明度
基本上就这些。关键是别一上来就全图盖黑，先定位内容区域，再用渐变“定点提神”，比调 opacity 或 filter 更精准、更耐看。
