Bootstrap轮播图箭头颜色需按版本区分修改：Bootstrap 5推荐覆盖--bs-carousel-control-color变量，Bootstrap 4需重写::before的content与color；同时必须确保轮播容器有position: relative且data-bs-target与id严格匹配，否则样式无效。
bootstrap轮播图控制箭头默认是白色svg图标，在浅色背景图上直接“消失”，改颜色不是加个color就能生效——因为图标由background-image（bootstrap 5）或::before伪元素（bootstrap 4）渲染，必须覆盖对应样式层。
Bootstrap 5：改--bs-carousel-control-color变量最省事
Bootstrap 5 内置 CSS 变量统一控制箭头颜色，改它比写一堆选择器更可靠，且自动适配 hover 状态：
- 全局生效：
:root { --bs-carousel-control-color: #2563eb; } - 仅作用于某个轮播图：
#myCarousel { --bs-carousel-control-color: #dc2626; } - 这个变量同时影响
.carousel-control-prev-icon和.carousel-control-next-icon的 SVGfill值，无需手动解码 base64 或拼接 data URL
Bootstrap 4：重写::before的content和color
Bootstrap 4 用 Unicode 字符（‹ 和 ›）做箭头，直接改伪元素内容和颜色即可：
- 覆盖左右箭头文字和颜色：
.carousel-control-prev::before { content: "‹"; color: #1e40af; font-size: 28px; } .carousel-control-next::before { content: "›"; color: #1e40af; font-size: 28px; } - 注意：不能只写
color，因为默认content是空字符串，不显式声明就啥也不显示 - 若想用 Font Awesome 图标，需确保字体已加载，并用
font-family: "Font Awesome 6 Free"; content: "\f053";（prev）、"\f054"（next）
箭头看不见？先查position: relative和overflow
即使颜色改了，箭头仍可能“隐身”——不是没渲染，而是被裁剪或定位错位：
- 轮播容器（即
<div class="carousel">）必须有<code>position: relative，否则.carousel-control-*的position: absolute会脱标到 body 上 - 检查父容器是否设了
overflow: hidden，尤其常见于 banner 区域，会把伸出边界的箭头直接切掉 - 用开发者工具选中
.carousel-control-prev，看 computed 样式里display是否为block、opacity是否为1、visibility是否为visible - 默认图标尺寸是
1rem × 1rem，建议显式设置：.carousel-control-prev-icon, .carousel-control-next-icon { width: 1.5rem; height: 1.5rem; background-size: 100% 100%; } - 不设
background-size会导致新图标按原始宽高比缩放，常表现为图标过小或偏移 - 若用 SVG data URL，确保 URL 中的
fill值已替换为你想要的颜色（如%23dc2626），否则改 CSS 变量也无效
自定义图标时别漏掉background-size
如果用background-image替换了默认 SVG，但图标拉伸变形或显示不全，大概率是background-size没同步调整：
真正卡住人的往往不是怎么改，而是改完发现没反应——这时候优先检查轮播容器id和箭头data-bs-target是否严格一致、CSS 是否被更高权重规则覆盖、以及position: relative有没有漏写。这些地方一错，颜色再对也白搭。
