最稳方式是用position: relative包裹图片、position: absolute定位文字；figure/figcaption适合语义化图注；动态文字用data-*+js注入；移动端需用rem/vw和百分比适配。
用 CSS position 把文字叠在图片上最稳
直接用 position: relative 包住图片，再用 position: absolute 定位文字——这是兼容性最好、控制最准的方式，比 background-image 或 object-fit 混搭更可靠。
常见错误是把文字和图片写成兄弟元素却不加定位上下文，结果文字飘到页面左上角；或者用了 float，但文字脱离文档流后位置难对齐。
- 父容器必须设
position: relative（或absolute/fixed），否则absolute文字会相对于整个页面定位 - 图片建议设
display: block，避免底部默认留白 - 文字元素加
z-index: 1防止被其他层遮住（尤其在复杂布局里）
<div style="position: relative; display: inline-block;"> @@##@@ <div style="position: absolute; bottom: 8px; left: 8px; color: white; font-size: 14px; background: rgba(0,0,0,0.6); padding: 4px 8px;">阿尔卑斯山，2023</div> </div>
figure + figcaption 适合语义化图注
如果文字是说明性图注（比如“图1：实验设备连接示意图”），用 HTML5 原生 figure/figcaption 更合适——它自带语义，对屏幕阅读器友好，也方便后续用 CSS 控制样式。
注意：默认 figcaption 在图片下方，要叠上去得手动改定位，不能只靠结构。
立即学习“前端免费学习笔记（深入）”；
纯js带弹性动画的手风琴图片相册特效
下载
这是一款使用纯javascript来制作的带弹性动画的手风琴图片相册特效。该手风琴图片相册在鼠标滑过时，相应的图片会水平展开，而图片的说明文字则会垂直滑动上来，形成一些视觉差的感觉。 使用方法 在页面中引入slider.js文件
-
figcaption必须是figure的直接子元素 - 若想让它出现在图片右上角，仍需加
position: absolute和父级position: relative - 别用
figcaption做操作按钮或动态标签——它不是为交互设计的
用 data-* 属性配合 JS 动态加文字更灵活
当文字内容来自接口、或要响应点击/悬停变化时，硬写死 HTML 不现实。这时把文字存在 data-caption 里，用 JS 注入更可控。
容易踩的坑是没等图片加载完就取尺寸，导致文字定位偏移；或者没做防重复绑定，多次执行 JS 后出现多个图注。
- 监听
img.onload再计算位置，比直接 DOM 加载后执行更稳妥 - 用
dataset.caption读取属性值，注意驼峰转换（data-main-title→dataset.mainTitle） - 生成的文字容器建议加唯一 class，方便后续用
querySelector清理或更新
移动端适配时字体和间距容易糊成一团
PC 上看着刚好居中的文字，到手机上可能一半被切掉，或字号小到看不见——这不是代码错了，是响应式没跟上。
关键不是缩放图片，而是让文字尺寸、内边距、定位偏移量随视口变化。
- 用
rem或vw控制字体大小（比如font-size: 1.2rem或font-size: 3.5vw） - 避免固定像素的
top/left，改用百分比（bottom: 5%）或calc()（right: calc(10% + 8px)） - 测试真机：iOS Safari 对
rgba()背景透明度渲染略不同，深色文字配半透黑底有时发灰
最麻烦的其实是多图批量处理时，每张图宽高比不同，文字锚点得动态算——这时候别硬扛，用 object-fit: cover 统一裁剪，再按容器尺寸定位，比按原图尺寸算靠谱得多。
