轮播图文字说明需用容器包裹图片与文案，通过position: relative/absolute控制层级和定位，配合响应式字号、背景遮罩及JS动态同步更新。
轮播图里加文字说明，关键在结构层叠和定位控制
直接把文字塞进 <img> 标签里是无效的——HTML 图片标签不支持内嵌文本。必须用容器包裹图片和文案，再通过 CSS 控制层级和位置。
用 position: relative + absolute 实现文案覆盖
这是最常用、兼容性最好、且不影响轮播逻辑的方式。文案元素（如 <div class="caption">）需作为图片父容器的子元素，并脱离文档流定位。
<div class="carousel-item"> <img src="slide1.jpg" alt="第一张图"> <div class="caption">这里是第一张图的说明文字</div> </div>
对应 CSS 必须包含：
- 父容器（
.carousel-item）设position: relative -
.caption设position: absolute，并用bottom/left等控制位置 - 加
z-index确保文案在图片上方（通常z-index: 10就够） - 注意文字背景或半透明遮罩（比如
background: rgba(0,0,0,0.6)），否则白底图上黑字可能看不清
文案随轮播切换同步更新，别硬写死在 HTML 里
如果轮播是 JS 驱动（如 Swiper、Bootstrap Carousel 或手写定时器），文案内容应和图片一起动态切换，而不是每个 .carousel-item 里静态写一遍——否则容易漏改、难维护。
立即学习“前端免费学习笔记（深入）”；
- 推荐把文案存在 JS 数据数组中：
const slides = [{ img: 'a.jpg', text: '欢迎来到首页' }, ...] - 切换时，用 JS 同时更新
<img src>和.caption.textContent - 若用 Bootstrap 5，可监听
slide.bs.carousel事件，在回调里取event.to索引查文案数组 - 避免用
innerHTML插入未转义文案，防止 XSS（尤其文案来自用户输入时）
移动端适配文案：字号、行高、留白要重设
PC 上看着居中的文字，在手机上常被截断或挤压。不能只靠 font-size: 16px 一招打天下。
- 用
rem或vw做响应式字号（如font-size: 4vw，最大不超过20px） -
line-height设为1.4左右，避免单行过高撑开容器 - 左右留白至少
16px，防止边缘文字被屏幕圆角切掉（尤其 iOS） - 测试真机：有些安卓 WebView 对
position: absolute在transform轮播容器里的渲染有偏差，必要时加will-change: transform
