<p>默认箭头在暗色背景上不可见是因为Bootstrap 5使用fill: #000绘制SVG，假设背景为浅色；应通过覆盖.carousel-control-* svg path的fill属性为浅色（如#fff）并确保CSS在Bootstrap后加载来修复。</p>
为什么默认箭头在暗色背景上看不见
Bootstrap 5 的 .carousel-control-prev 和 .carousel-control-next 箭头使用 fill: #000（纯黑）绘制 SVG，当轮播图放在深灰、黑色等暗色背景上时，黑色箭头完全隐形。这不是 bug，而是 Bootstrap 默认假设背景为浅色——它没做暗色适配。
直接覆盖 SVG 的 fill 属性最可靠
别试图用 color 或 filter: invert()，前者对内联 SVG 无效，后者会翻转整个图标（包括边框和透明度），且可能影响可访问性。正确做法是定位到箭头 SVG 的 <path> 并重设 fill：
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-image: none;
}
.carousel-control-prev-icon svg path,
.carousel-control-next-icon svg path {
fill: #fff;
}
- 必须加
background-image: none，否则 Bootstrap 的 base64 SVG 背景图会覆盖你的样式 -
fill: #fff可按需换成#e0e0e0等柔和浅色，避免强对比眩光 - 该写法兼容所有现代浏览器，包括 Safari 15.4+
如果用了自定义轮播容器类，记得提高选择器权重
比如你把轮播包在 <div class="dark-bg-carousel"> 里，而全局 CSS 没生效，大概率是被 Bootstrap 的原生规则覆盖了。这时要增强作用域：
.dark-bg-carousel .carousel-control-prev-icon svg path,
.dark-bg-carousel .carousel-control-next-icon svg path {
fill: #f0f0f0;
}
- 不要用
!important，它会让后续维护变脆弱 - 确保这段 CSS 在 Bootstrap CSS 之后加载（检查
<link>顺序或@import位置） - 若用 Sass，可直接嵌套：
.dark-bg-carousel { .carousel-control-prev-icon { svg path { fill: #f0f0f0; } } }
箭头 hover 和 focus 状态别漏掉
暗色背景下用户更依赖视觉反馈，但 Bootstrap 默认的 :hover 样式仍基于浅色逻辑，容易失效。补全交互状态：
立即学习“前端免费学习笔记（深入）”；
.carousel-control-prev-icon:hover svg path,
.carousel-control-next-icon:hover svg path,
.carousel-control-prev-icon:focus svg path,
.carousel-control-next-icon:focus svg path {
fill: #fff;
}
- focus 状态对键盘导航至关重要，尤其 WCAG 2.1 要求
- 如果想加过渡效果，可追加
transition: fill 0.15s ease到父元素（.carousel-control-prev-icon） - 注意：IE11 不支持 SVG
fill过渡，如需兼容，改用opacity或 class 切换
background-color: #121212）上清晰可见，且保持响应式缩放和焦点轮廓完整。唯一要小心的是——如果你同时启用了 Bootstrap 的 data-bs-theme="dark"（v5.3+），它只影响表单和卡片，**不改变轮播箭头颜色**，仍需手动覆盖。 
