Question

我正在尝试更改箭头的颜色-但没有任何效果（也尝试将其设置为图像）。

我尝试了什么：

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' 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");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' 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");
}

我还尝试设置封装：ViewEncapsulation.None，它确实可以工作，但是却弄乱了我页面上的所有CSS，所以我不想这样做。有什么想法吗？

HTML：

<ngb-carousel *ngIf="images">
  <ng-template ngbSlide *ngFor="let image of images">
    <div class="picsum-img-wrapper">
      <img [src]="image" alt="Random slide">
    </div>
  </ng-template>
</ngb-carousel>

css：

@Component({
  selector: 'app-slideshow',
  templateUrl: './slideshow.component.html',
  styleUrls: ['./slideshow.component.css'],
  // encapsulation: ViewEncapsulation.None

})
export class SlideshowComponent {

  showNavigationArrows = true;
  showNavigationIndicators = false;
  images = ['../../assets/img/3.jpeg',
  '../../assets/img/4.jpeg',
  '../../assets/img/5.jpeg',
  '../../assets/img/6.jpeg',
  '../../assets/img/9.jpeg',
  '../../assets/img/44.jpeg',
  '../../assets/img/55.jpeg',
  '../../assets/img/66.png',
  '../../assets/img/77.jpeg',
  '../../assets/img/88.jpeg',
  '../../assets/img/100.jpeg',
  '../../assets/img/3333.jpeg',
  '../../assets/img/5555.jpeg',
  '../../assets/img/2222.jpeg',
  '../../assets/img/777.jpeg',
  '../../assets/img/1111.jpeg',
  '../../assets/img/222.jpeg']


  constructor(config: NgbCarouselConfig) {
    config.showNavigationArrows = true;
    config.showNavigationIndicators = false;
  }
}

Answer 1

修改CSS应该可以正常工作，为什么CSS替代项似乎无法正常工作，因为填充的颜色仍然是白色，您可以尝试将其更改为fill='%23f00'（红色）。

使用红色箭头检查Stackblitz上的演示：https://stackblitz.com/edit/angular-xcv6dg-jbeztk?file=styles.css

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' 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");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' 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");
}

我该如何更改ng bootstrap传送带箭头的颜色

1 个答案: