轮播图文字说明需用容器包裹图片与文案，通过position: relative/absolute控制层级和定位，配合响应式字号、背景遮罩及JS动态同步更新。
轮播图里加文字说明，关键在结构层叠和定位控制
直接把文字塞进
用 position: relative + absolute 实现文案覆盖
这是最常用、兼容性最好、且不影响轮播逻辑的方式。文案元素（如 对应 CSS 必须包含： 如果轮播是 JS 驱动（如 Swiper、Bootstrap Carousel 或手写定时器），文案内容应和图片一起动态切换，而不是每个 立即学习“前端免费学习笔记（深入）”； PC 上看着居中的文字，在手机上常被截断或挤压。不能只靠
.carousel-item）设 position: relative
.caption 设 position: absolute，并用 bottom / left 等控制位置z-index 确保文案在图片上方（通常 z-index: 10 就够）background: rgba(0,0,0,0.6)），否则白底图上黑字可能看不清文案随轮播切换同步更新，别硬写死在 HTML 里
.carousel-item 里静态写一遍——否则容易漏改、难维护。
const slides = [{ img: 'a.jpg', text: '欢迎来到首页' }, ...]
.caption.textContent
slide.bs.carousel 事件，在回调里取 event.to 索引查文案数组innerHTML 插入未转义文案，防止 XSS（尤其文案来自用户输入时）
移动端适配文案：字号、行高、留白要重设
font-size: 16px 一招打天下。
文案不是贴上去就完事，它得和轮播的 DOM 结构、JS 切换逻辑、CSS 渲染层级严丝合缝。最容易被忽略的是：文案没做响应式字号、没加背景遮罩、没随 slide 事件同步更新——这三处一出问题，整个信息传达就断了。rem 或 vw 做响应式字号（如 font-size: 4vw，最大不超过 20px）line-height 设为 1.4 左右，避免单行过高撑开容器16px，防止边缘文字被屏幕圆角切掉（尤其 iOS）position: absolute 在 transform 轮播容器里的渲染有偏差，必要时加 will-change: transform
