Html 更改ng引导转盘中的箭头颜色

我正在使用ng引导创建旋转木马，我想将箭头颜色或图像从白色更改为黑色，因为我有白色背景图像，它们是不可见的。我的问题是我无法获得span，我不知道如何在scss中调用它。我使用bootstrap 4和ng bootstrap进行角度分析。当我在控制台中更改图像url时，它会工作。我试图直接得到箭，但什么也没发生

我的代码：

<div class="col-lg-6">
      <div class="imageCarousel">
        <ng-container *ngIf="product.images">
          <ngb-carousel>
            <ng-template id="imageSlide" ngbSlide *ngFor="let image of product.images | slice: 1">
              <img [src]="image">

            </ng-template>

          </ngb-carousel>
        </ng-container>
      </div>
    </div>

---

ngb carousel使用SVG图像作为控件，您可以使用自己的prev图像和next按钮覆盖该控件：

.carousel-control-prev-icon{
   background-image: url('https://apufpel.com.br/assets/img/seta_prim.png')
}
.carousel-control-next-icon{
  background-image: url('https://apufpel.com.br/assets/img/seta_ult.png')
}

---

在提供的链接上检查该控件时，可以看到两个按钮都附加了类

---

这些箭头具有背景图像属性。在您自己的css文件中为该属性重写该类

是的，已经解决了，但有时需要将视图封装设置为

None

@Component({
  selector: "app-builder",
  templateUrl: "./builder.component.html",
  styleUrls: ["./builder.component.css"],
  encapsulation: ViewEncapsulation.None
})

---

Eduardo（以上）给出的答案只有在封装设置为ViewEncapsulation时才有效。这不会对CSS的其他方面产生意外的副作用

相反，可以使用：：ng deep伪类来针对特定的CSS。在scss文件中，请使用以下命令：

::ng-deep .carousel-control-prev-icon{
  background-image: url('your-replacement.svg');
}
::ng-deep .carousel-control-next-icon{
  background-image: url('your-replacement.svg');
}

---

首先，我建议升级到ng bootstrap v6+，它正确地将ngb组件ViewEncapsulation设置为None，这样就可以通过全局CSS或未封装的组件CSS进行设置。见（）

其次，只需再次设置SVG，即可覆盖SVG&将fill属性更改为所需的任何颜色

.carousel-control-next-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(50, 54, 57)' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e") !important;
}

或者，如果您只是想获得更高的对比度，也可以反转颜色：

.carousel-control-next-icon,
.carousel-control-prev-icon {
   filter: invert(1);
}

---

在主机组件上设置封装：查看封装。无不是最佳做法。更明智的做法是对projects styles.scss（或angular.json中指定为全局样式文件的任何内容）进行这些条目更改

是的，问题是我对scss不太熟悉，我一直在尝试，但仍然没有像上面所说的那样，“我正试图直接获取箭头”你能上传一把小提琴吗？我已将此与firebase db连接，不能：/n问题是，我不能在我的组件样式中设置这些箭头的样式。Global style.scss起作用了。不管怎样，你的答案是有效的，但你可以将其更改为使用它全局答案，我会接受我现在从我的办公桌上起来。你能验证在inspector中更改属性是否有效吗？是的，我已经检查过了，没有任何效果，我正试图找到这个箭头，直接指向它们，甚至打电话给他们的父母，还是什么都没有谢谢——这样我就可以让图标的本地CSS工作了。我尝试过你的解决方案，现在本地CSS工作了，但箭头单击不工作。欢迎使用堆栈溢出。请通过本教程了解堆栈溢出是如何工作的，并阅读如何询问如何提高问题的质量。

.carousel-control-next-icon,
.carousel-control-prev-icon {
   filter: invert(1);
}