文字在首图上发虚看不清，须用层叠+半透明遮罩双控：父容器设position: relative作锚点，遮罩层用background-color: rgba(0,0,0,0.55)而非opacity，z-index分层锁死，深色模式需反向配色为rgba(255,255,255,0.4)。
文字在首图上发虚、看不清，不是调高 contrast 或加 text-shadow 就能解决的——核心矛盾是背景干扰，得用层叠 + 半透明遮罩双控。
图片容器必须设 position: relative
绝对定位的文字层（或遮罩层）需要一个“锚点”，否则会相对于 body 或最近的已定位祖先定位，大概率飘出图片区域。常见翻车：只给文字加 position: absolute，父级 <figure> 或 <header> 没设 position: relative。
- 用
<div class="hero">包住<img>和文字，立刻加position: relative - 如果首图是
background-image，那这个容器本身就是锚点，不用额外 wrapper - 避免用
display: inline元素当容器——它不产生块级格式化上下文，定位基准可能失效
遮罩层用 background-color: rgba()，别碰 opacity
opacity 会让整个元素（含文字、图标、子节点）一起变淡，可读性反而下降；rgba() 只作用于背景色，文字保持 100% 清晰度。
- 写成
background-color: rgba(0, 0, 0, 0.6)，alpha 值建议控制在 0.55–0.85 之间 - 低于 0.55 压不住底图细节，高于 0.85 会让文字像蒙在毛玻璃后
- 别用八位 hex（如
#0008）——IE 完全不支持，旧版 iOS Safari 渲染异常 - 遮罩层需设
z-index: 1，文字层设z-index: 2，确保层级锁死
文字居中优先用 flex，慎用 transform: translate()
top: 50%; left: 50%; transform: translate(-50%, -50%) 在响应式场景下极易错位：字体缩放、多行换行、容器宽高变化都会导致偏移。
立即学习“前端免费学习笔记（深入）”；
- 遮罩层本身设
display: flex; justify-content: center; align-items: center - 文字容器（如
<p class="hero-title">）保持默认流式布局，不设宽高 - 若需内边距，直接在文字容器上加
padding: 16px 24px，别动遮罩层尺寸 - 多行文字加
white-space: normal; line-height: 1.4;，避免挤在一起
深色模式下遮罩色要反向配色
系统切换深色模式时，rgba(0,0,0,0.6) 在暗背景下视觉权重过重，文字反而“沉”进去了。不能只改 alpha，得换颜色基底。
- 浅色模式：深色遮罩 →
background-color: rgba(0, 0, 0, 0.55) - 深色模式：浅色遮罩 →
background-color: rgba(255, 255, 255, 0.4) - 用 CSS 变量统一管理：
--overlay-bg: rgba(0, 0, 0, 0.55);，再用@media (prefers-color-scheme: dark)覆盖 - 测试时务必关掉系统「增加对比度」开关——它会强制抬高 rgba 表现，本地看着好，用户端可能糊成一片
最麻烦的从来不是写对那一行 rgba()，而是得同时盯住三件事：锚点是否生效、遮罩是否压准了局部区域、深色模式下文字有没有“浮”出来。
