Bootstrap 5 不内置全屏背景轮播图，需用 height: 100vh + background-image + background-size: cover 实现；禁用 transform 动画改用 opacity 切换，并优化图片尺寸与格式以保障性能。
Bootstrap 5 本身不提供“全屏背景轮播图”的开箱即用方案——它只负责轮播逻辑和基础样式，全屏效果、背景填充、响应式裁剪必须靠自定义 CSS 实现，且容易因 object-fit、height 层级或 overflow 隐藏而失效。
让 .carousel-item 真正撑满视口高度
默认轮播项是内容高度自适应的，不会自动占满屏幕。必须显式设置高度，并防止父容器塌陷：
-
.carousel和.carousel-inner都需设为height: 100vh（不是100%，避免继承链中断） -
.carousel-item要加height: 100%并设position: relative，否则子元素绝对定位会失效 - 若轮播外层有 padding/margin，会导致
100vh溢出滚动条，建议给body加overflow-x: hidden
用 background-image 替代 <img> 实现真正背景行为
直接在 .carousel-item 上用 background-image 更可控：能自由设置 background-size: cover、background-position: center，且不干扰 DOM 流；而内嵌 <img> 需额外包裹、设 object-fit: cover，还容易被 max-width: 100% 干扰。
.carousel-item {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.carousel-item:nth-child(1) {
background-image: url('hero-1.jpg');
}
.carousel-item:nth-child(2) {
background-image: url('hero-2.jpg');
}
- 务必确认图片路径可访问，DevTools 中检查 Network 标签页是否返回 404
- 不要在
.carousel-item上同时写background和内嵌<img>，CSS 背景会覆盖 img，但 img 仍会触发加载和布局计算 - 如需支持暗色模式，可用
@media (prefers-color-scheme: dark)切换背景图
解决移动端缩放错位与过渡卡顿
轮播切换时，背景图可能跳动或缩放异常，常见于 iOS Safari —— 它对 background-size: cover 的重绘优化较差，且轮播 transform 动画易触发渲染层分裂。
立即学习“前端免费学习笔记（深入）”；
- 给
.carousel-item加will-change: transform提前提示合成层，但仅在必要时启用（避免过度创建图层） - 禁用轮播默认的
transform过渡，改用opacity+visibility切换（更稳定）：.carousel-fade .carousel-item { opacity: 0; transition: opacity 0.6s ease-in-out; }.carousel-fade .carousel-item.active { opacity: 1; } - 移除
.carousel-caption内的text-shadow或模糊滤镜，它们在低端安卓机上极易掉帧
最常被忽略的是图片尺寸与 DPR 匹配：单张 1920×1080 图在 Retina 屏上会模糊，应提供 @2x 版本并用 image-set() 或 srcset（若用 <img>），但纯 CSS 背景图只能靠高分辨率原图+压缩权衡。轮播图不是越高清越好，2MB 一张图会让首屏加载延迟超 3 秒——建议控制在 300–600KB，WebP 格式优先。
