文字一加载就直接显示而非淡入，是因为bootstrap的fade类仅对.tab-pane、.carousel-item等特定容器生效，普通文字需包裹在同时含fade和show类的position-relative子容器内，缺一即硬切或空白。
为什么文字一加载就直接显示，而不是淡入？
因为 Bootstrap 的 fade 类只对 .tab-pane、.carousel-item 这类容器生效，不作用于普通文字层。你给文字加 fade 没用——它不是动画触发器，只是个空类。
真正能实现淡入的路径只有一条：把文字层包进一个带 fade 和 show 的容器里，并确保该容器本身是响应式定位上下文的一部分。
- 文字不能直接加
fade，必须包裹在<div class="fade show"></div>中 - 这个包裹层必须放在
position-relative容器内，否则定位失效 -
show类必须存在，否则初始 opacity 是 0，文字不可见 - 别用
visibility: hidden或display: none控制显隐——会绕过 CSS transition
怎么让文字随图片一起淡入，且不破坏定位？
关键在于结构嵌套顺序和 CSS 层叠优先级。文字浮层必须是图片父容器的直接子元素，且其淡入动画不能被父容器的 overflow: hidden 截断（比如 .card 默认就有）。
示例结构：
<div class="position-relative">
@@##@@
<div class="position-absolute top-0 start-0 end-0 p-4 fade show">
<h3 class="fs-5 fw-bold text-white">标题</h3>
</div>
</div>
-
fade和show必须同时出现在文字包裹层上，缺一不可 - 不要给文字层加
opacity内联样式，会覆盖.fade .show的opacity: 1 - 如果用了
z-index，确保它高于图片但低于其他交互层（如按钮），常见值为z-index: 2 - 避免在父容器上设
transform（如scale()），它会创建新的层叠上下文，导致z-index失效
小屏下文字淡入后位置错乱怎么办？
错乱主因是 fade 动画期间，文字层宽度尚未稳定，而 top-50 translate-middle 这类百分比定位依赖渲染尺寸。小屏尤其明显。
稳妥做法是用断点类分隔两套定位逻辑，而非寄希望于动画过程中自动适配：
- 小屏底部居中：
bottom-0 start-0 end-0 translate-middle-x fade show d-block d-md-none - 大屏垂直居中：
top-50 start-50 translate-middle fade show d-none d-md-block - 字号也得拆开：
fs-5 d-block d-md-none+fs-4 d-none d-md-block - 别用
transition-delay微调文字动画时机——它会让淡入不同步，反而更突兀
为什么加了 fade 还是硬切，或者首屏空白？
这是最常踩的坑：你以为类名写了就完事，其实 Bootstrap 的淡入动画极度依赖 CSS 规则完整加载。一旦缺失 .fade 对应的 transition 声明，整个链路就断了。
- 打开开发者工具，检查任意一个文字包裹层，确认 computed 样式中有
transition: opacity .15s ease-in-out - 如果没看到，说明
bootstrap.min.css不完整，或被自定义构建剔除了utilities/_transitions.scss - React/Vue 项目中动态插入文字层时，必须手动补全
fade show类，JS 不会自动帮你加 - 别在文字层上写
style="opacity: 1"——它会覆盖.show的 !important 声明，导致动画无法从 0 开始
定位和动画是两套独立系统，但必须共用同一个定位上下文；漏掉 position-relative，文字就飘走；漏掉 fade show，文字就硬切或隐形。二者缺一不可，且不能靠 JS 补救。
