Bootstrap 4轮播控件SVG图标条件颜色设置问题

嗨，我来帮你搞定这个轮播箭头颜色的问题～你遇到的情况其实是Bootstrap 4轮播控件的箭头实现方式导致的：默认情况下，轮播的前后箭头是内嵌SVG的背景图，fill颜色已经通过$carousel-control-color变量硬编码到背景图的data URI里了，所以直接改元素的color或fill属性根本碰不到SVG里的颜色；而Sass条件逻辑没生效，大概率是变量作用域或者导入顺序没处理对。

下面给你两种靠谱的解决方法，选适合你的就行：

方法一：用Sass嵌套覆盖变量（推荐，符合Bootstrap体系） #

既然你在用Sass，那可以针对bg-primary背景的卡片，局部覆盖$carousel-control-color变量，重新生成箭头的SVG背景图：

// 全局已经设置的默认绿色箭头（你原来的代码）
$carousel-control-color: $secondary !default;

// 针对带primary背景的卡片，单独设置白色箭头
.card.bg-primary {
  // 局部覆盖变量为白色
  $carousel-control-color: #fff;
  
  // 重新生成prev箭头的背景图
  .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
  }
  
  // 重新生成next箭头的背景图
  .carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
  }
}

这样编译后，bg-primary卡片内的轮播箭头就会变成白色，其他地方还是保持原来的绿色。

方法二：用CSS Filter快速反转颜色（适合已编译Bootstrap的场景） #

如果已经编译好了Bootstrap CSS不想再改Sass，直接用CSS的filter属性反转箭头颜色就行：

// 给primary背景卡片里的轮播箭头加滤镜，转成白色
.card.bg-primary .carousel-control-prev-icon,
.card.bg-primary .carousel-control-next-icon {
  filter: invert(1);
  // 如果你的绿色偏浅，可能需要微调亮度：filter: invert(1) brightness(0.9);
}

这个方法原理是通过滤镜把原来的绿色箭头反转成白色，简单粗暴见效快。

为啥之前的方法没用？ #

再给你补个小知识点：Bootstrap 4的轮播箭头不是独立的SVG元素，而是把SVG代码转成了data URI作为背景图，所以SVG的fill属性已经写死在背景图里了，你修改元素本身的color或fill根本影响不到它；而Sass条件逻辑如果没做局部嵌套覆盖，变量会全局生效，达不到局部修改的效果。

内容的提问来源于stack exchange，提问作者Willi