必须同时保留carousel和carousel-fade类，确保.carousel-item为position: absolute，验证.carousel-fade .carousel-item的transition和opacity生效，并统一内容元素显示模式。
直接加 carousel-fade 类却没淡入效果，不是 Bootstrap 版本太低，也不是 JS 没加载，而是几个关键 CSS 条件没同时满足。淡入淡出纯靠 CSS 实现，不依赖 JavaScript 动画逻辑。
必须同时保留 carousel 和 carousel-fade 类
只写 class="carousel-fade" 会丢失轮播基础行为——指示器不响应、键盘控制失效、自动播放停止。正确写法是：
-
class="carousel slide carousel-fade"（Bootstrap 5 中slide是默认动画类，保留它才能激活轮播系统） - 不能删掉
carousel或slide，否则整个组件退化为静态容器
确保 .carousel-item 是绝对定位且层叠正常
淡入效果依赖所有 .carousel-item 叠在同一个位置，靠 opacity 切换显隐。若定位被破坏，就会出现“硬切”或内容错位：
-
.carousel-item必须有position: absolute（Bootstrap 默认已设） - 检查父容器（如
.carousel-inner）是否被加了display: flex、transform或overflow: hidden——这些会创建新层叠上下文，导致 opacity 变化不可见 - 用浏览器开发者工具选中一个
.carousel-item，确认 computed 样式中position是absolute，且z-index未被意外覆盖
验证 transition 和 opacity 是否真正生效
Bootstrap 的 fade 动画由 CSS 规则驱动，关键样式必须加载并生效：
立即学习“前端免费学习笔记（深入）”；
- 打开开发者工具，查看
.carousel-fade .carousel-item是否有transition: opacity 0.6s ease - 非 active 的项应显示
opacity: 0，active 项为opacity: 1；如果两者都是 1，说明carousel-fade对应的 CSS 块未加载（常见于按需引入 SCSS 时漏掉了carousel的 fade 部分） - 自定义动画时，务必带
.carousel-fade前缀，例如：.carousel-fade .carousel-item { transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
内容元素要统一显示模式
图片、视频或文字块混用时，不同元素默认 display 值不同，会导致 opacity 过渡不一致：
- 所有轮播项内容（
<img alt="HTML结合Bootstrap怎么使用 carousel-fade 制作渐变淡入轮播" >、<video></video>、<div>）都加上 <code>class="d-block w-100"，强制块级、满宽显示 - 视频需额外处理：poster 图不响应 opacity，建议用
<div> 包裹 poster 和 video，并把 opacity 应用到该容器上 <li>避免给内容加 <code>visibility: hidden或display: none——它们会跳过 transition，造成瞬间切换
