文字盖图片偏移或消失，主因是父容器未设position: relative；须用div包裹img与文字并设relative，再用absolute+transform居中，加rgba背景和text-shadow提升可读性。
文字盖在图片上却偏移或消失？检查父容器是否设了 position: relative
文字没盖准、飞到页面角落、甚至完全看不见，90% 是因为图片容器没设定位上下文。Bootstrap 5 的 .card 默认带 position: relative，但 .carousel-item、.ratio 容器、普通 div 都不带——你得手动加。
常见错误写法：标题
h3 一设 position: absolute 就直接相对于 body 定位。
- 必须用
div包住img和文字，比如...
- 给这个
div加position: relative（内联或 CSS 类均可） - 避免把文字塞进
img是替换元素，无法承载子节点 - 别用
.row或.container直接当覆盖容器，它们自带padding和margin，会干扰居中计算
transform: translate(-50%, -50%) 为什么还是没居中？
只写 top: 50%; left: 50%，文字左上角会落在中心点，视觉上明显偏右下。必须配 transform 回拉，但回拉基准是元素自身盒模型——如果文字没显式设宽高、行高浮动、字体渲染差异大，中心点就容易漂移。
- 推荐写法：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 更稳的替代方案：给覆盖层加
width: 100%; height: 100%（或inset: 0），再用display: flex; align-items: center; justify-content: center - 别用
margin-top: -XXpx手动回拉——图片尺寸不固定时立即失效 - 文字标签如
必须设z-index: 2，否则可能被 navbar 或其他组件遮住
文字可读性差、贴边看不清？背景与阴影不能省
纯白字盖深色图还行，一换浅图就糊成一片；文字紧贴图片边缘，在小屏或高缩放下也难识别。这不是配色问题，是视觉层叠设计缺失。
- 加半透黑底：
background: rgba(0, 0, 0, 0.6); padding: 0.5rem 1rem - 必加文字阴影：
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8)，比单靠颜色鲁棒得多 - 避免用
text-white这类静态类——深图浅字、浅图深字需动态切换，JS 控制 class 更实际 - 如果用伪元素（如
::after）做水印，记得加pointer-events: none，不然会拦截点击
响应式下文字缩放失衡、移动端错位？单位和渲染策略要调
用 px 写字号，图片一缩小，文字就撑出边界；某些 Android WebView 对 transform 计算有偏差，导致居中偏几个像素。
- 字号优先用
rem或vmin（如font-size: 2vmin），随视口等比缩放 - 防截图/强水印需求，CSS 方案不够——浏览器右键另存、截图工具、DevTools 删除元素都能绕过，必须服务端生成
- 移动端卡顿？加
will-change: transform或transform: translateZ(0)强制 GPU 加速，但仅限必要元素 - 轮播图中文字随图淡入：确保文字和
.carousel-item内，不要额外包裹，让 Bootstrap 的opacity过渡统一控制
文字覆盖这事，表面是几行 CSS，实际卡点全在定位上下文链、盒模型行为、移动端渲染策略这三层。漏掉任意一层，都会在某个机型或缩放比例下突然崩掉。
