图片容器须设position: relative以建立定位上下文，文字用absolute时才准确定位；半透明效果应通过background+padding实现而非opacity；底部对齐需bottom: 0配合transform: translatey(100%)；响应式文字尺寸推荐clamp()函数。
图片容器必须设为relative才能让absolute文字准确定位
很多人把 position: absolute 往图片上一加，文字就飞到页面左上角去了——根本没生效。核心原因是：absolute 的定位基准是「最近的已定位祖先元素」，而图片本身默认是 static，不构成定位上下文。
必须给图片外层容器（比如 <div> 或 <code><figure></figure>）加上 position: relative，哪怕它没其他样式也要写上。否则文字会一路往上找，最终相对于 定位，完全失控。
- 别只给图片加
position: relative——<img alt="CSS如何实现图片上的半透明文字标题_通过absolute定位在图片底部css" >是替换元素，加了也常不触发包含块行为，稳妥做法是包一层<div class="image-wrapper"> <li>如果用 <code><picture></picture>或响应式srcset，同样要确保它的直接父容器是relative - 某些 CSS 框架（如 Bootstrap）的栅格类可能自带
position，需检查是否意外覆盖 - 推荐写法：
background: rgba(0,0,0,0.6)+color: #fff+padding: 12px 16px - 避免用
opacity: 0.8在文字容器上——它会让所有子元素（比如<span></span>内嵌图标）一起变淡 - 不要依赖
text-shadow模拟背景，多行文字时阴影会错位、性能差、且无法控制宽度 - 典型安全组合：
position: absolute; bottom: 0; left: 0; right: 0; transform: translateY(100%); - 如果文字固定高度（如行高 1.4），也可用
margin-top: -1.4em替代 transform，但响应式场景下不如 transform 可靠 - 千万别写
top: 100%——那是从顶部往下跑一整屏，不是贴底 - 推荐：
font-size: clamp(1rem, 4vw, 1.5rem)+padding: clamp(0.5rem, 3vw, 1rem) - 如果项目不支持
clamp，至少用font-size: 1.2rem而非16px，并确保html根字体随屏幕变化（如用vw设置） - 避免在文字容器上设
width: 100%——它会撑满整个图片宽，遮挡重要内容；应靠left/right和max-width控制实际宽度
文字半透明靠background + padding实现，不是靠color或opacity
直接给文字设 color: rgba(255,255,255,0.8) 看似简单，但背景一变、图片明暗一变，文字立刻看不清。真正稳的方案是：用带透明度的色块垫在文字背后，再配高对比度文字色。
关键不是“让文字变半透”，而是“让文字可读”。所以重点是 background + padding 组合，而不是调 opacity（那会让整个文字包括边缘都发虚，还影响子元素）。
立即学习“前端免费学习笔记（深入）”；
底部对齐要用bottom: 0 + left/right + transform，别只靠bottom
想让标题紧贴图片底边，光写 bottom: 0 不够。因为 absolute 元素默认以左上角为锚点，bottom: 0 只是把它下边缘拉到容器底边，文字本身会“吊”在那儿，视觉上浮空。
正确做法是：先用 bottom: 0 定纵向，再用 left: 0 / right: 0 定横向起点，最后用 transform: translateY(100%) 把文字整体上推一个自身高度，让它真正“坐”在底边上。
响应式下文字尺寸和padding必须用rem或clamp，不能写死px
图片缩放时，写死 font-size: 16px 和 padding: 12px 的文字会越来越小，最终糊成一片。尤其在移动端，用户不是看不清标题，是根本找不到标题在哪。
必须让文字区域随图片等比缩放。最简方案是用 rem 配合根字体调整；更现代的写法是 clamp()，兼顾最小可读性和大屏表现。
真正难的不是让文字出现在图片上，而是让它在任意尺寸、任意图片明暗、任意设备像素比下，都保持可读、不越界、不闪烁。这些细节不试个七八次真调不出来。
