核心是通过遮罩层提升文字可读性：在背景图上用::before伪元素添加半透遮罩（如rgba(0,0,0,0.4)），z-index设为1，文字z-index设为2；配合媒体查询动态调整遮罩透明度与文字颜色，并优化字体粗细、阴影及行高。
文字和背景重叠看不清，核心是对比度不足或层级关系没处理好。媒体查询里调颜色只是补救，关键得先确保遮罩层（overlay）和文字有足够视觉分离。
加一层半透明遮罩提升可读性
纯色背景上放文字还行，但图片背景或渐变背景下，文字容易“融进去”。推荐在背景图上方加一层黑色/白色半透遮罩：
- 用 ::before 伪元素盖在背景容器上，background: rgba(0,0,0,0.4)（黑底40%透明）最常用
- 确保遮罩 z-index 低于文字但高于背景图，比如：遮罩设 z-index: 1，文字设 z-index: 2
- 遮罩要 absolute 定位并铺满父容器，别忘加 content: “”
媒体查询中动态调文字颜色与遮罩强度
小屏幕下亮度高、字体小，原配色可能失效。可在 @media 里同步调整：
- 比如暗背景+浅字在桌面端OK，但移动端阳光下反差变弱 → 媒体查询里把文字色加深（color: #111），遮罩调浓一点（rgba(0,0,0,0.6)）
- 深色模式适配时，可加 @media (prefers-color-scheme: dark) 单独设遮罩为 rgba(255,255,255,0.2) + 文字用深灰
- 避免只改颜色不调遮罩——单改文字色可能让边缘发虚，双调才稳
字体本身也影响清晰度
再好的遮罩，字体太细、太轻、无描边，照样糊：
立即学习“前端免费学习笔记（深入）”；
- 优先用 font-weight: 600 或以上，避免 300/400 在小屏上发虚
- 加轻微文字阴影增强轮廓：text-shadow: 0 1px 2px rgba(0,0,0,0.5)（注意别太重）
- 行高（line-height）别太小，至少 1.3，防止多行文字挤在一起降低识别度
基本上就这些。遮罩+颜色+字体三者配合，比单靠媒体查询硬调颜色靠谱得多。