用linear-gradient叠加半透明白色渐变提亮背景图关键区域，既保留原图质感又增强文字可读性，推荐#ffffff66等带alpha的十六进制写法，并按图层顺序置于background属性最前。
背景图片过暗时，直接调亮整张图容易失真或发灰，更稳妥的做法是用 linear-gradient 在图片上方叠加一层半透明白色（或浅色）渐变，既提亮关键区域（比如文字落点），又保留原图的质感和层次。
用透明渐变精准控制明暗过渡
核心思路是把渐变当作“遮罩层”叠在背景图上，利用 alpha 通道实现自然融合。不要写死不透明度，而是用 rgba(255,255,255,0.3) 这类带透明度的色值，或更推荐使用十六进制带 alpha 的写法（如 #ffffff66），兼容性好且写法简洁。
- 顶部浅、底部深：适合标题在上方的布局，
linear-gradient(to bottom, #ffffffcc, transparent) - 底部亮、顶部暗：突出底部按钮或文案，
linear-gradient(to top, #00000044, transparent) - 中心聚光：用径向渐变更柔和，
radial-gradient(circle at center, transparent 40%, #ffffff33 90%)
与 background-image 正确叠加的写法
CSS 中多个背景图（含渐变）可写在同一 background 属性里，用逗号分隔，顺序决定图层上下关系——越靠前的越在上方。确保渐变写在图片前面：
background: linear-gradient(to bottom, #ffffffcc, transparent), url(./hero.jpg);
同时别忘了设 background-size: cover 和 background-position: center，避免图片拉伸错位。
立即学习“前端免费学习笔记（深入）”；
适配深色模式的小技巧
如果项目支持深色模式，纯白渐变在暗背景下会突兀。可用 color-scheme: light dark 配合 @media (prefers-color-scheme: dark) 动态切换渐变色：
- 浅色模式：用
linear-gradient(to bottom, #ffffffa6, transparent) - 深色模式：改用
linear-gradient(to bottom, #00000066, transparent)，避免过曝
文字可读性不够？再加一层微调
如果叠加后标题仍不够清晰，不建议继续加厚渐变。更优解是给文字容器加 backdrop-filter: blur(2px)（需注意兼容性），或局部加一层极细的半透明白边：text-shadow: 0 1px 2px rgba(255,255,255,0.7)。小细节比暴力提亮更耐看。
基本上就这些。用好 linear-gradient 做透明叠加，不是为了掩盖图片缺陷，而是引导视线、强化节奏——背景还是那个背景，只是更“会说话”了。
