我正在使用 ng-bootstrap 创建轮播,我想将箭头颜色或图像从白色更改为黑色,因为我有白色背景图像并且它们是不可见的。我的问题是我无法获得跨度,我不知道如何在 scss 中调用它。我正在使用 bootstrap 4 和 ng-bootstrap 来实现角度https://ng-bootstrap.github.io/#/components/carousel/examples。当我在控制台中更改图像网址时,它可以工作。我试图直接获取箭头但没有任何反应。
我的代码:
<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>
scss:
.imageCarousel {
max-height: 500px;
text-align: center;
color: $color2;
.carousel .slide {
width: 50px;
height: 50px;
background-image: url("https://storage.googleapis.com/staging.pc-shop-260af.appspot.com/ic_keyboard_arrow_right_black_24px.svg");
}
img {
// border: 2px solid blue;
max-width: 100%;
max-height: 400px;
}
}
是的,它已经解决了,但有时你需要将视图封装设置为
None
@Component({
selector: "app-builder",
templateUrl: "./builder.component.html",
styleUrls: ["./builder.component.css"],
encapsulation: ViewEncapsulation.None
})
ngb-carousel 使用 SVG 图像作为控件,您可以使用自己的上一个和下一个按钮图像覆盖它:
.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')
}
首先,我建议升级到 ng-bootstrap v6+,它可以正确地将 ngb 组件 ViewEncapsulation 设置为 None,这样就可以通过全局 CSS 或通过未封装的组件 CSS 来设置它。请参阅(https://github.com/ng-bootstrap/ng-bootstrap/issues/3479)。
其次,只需再次设置 SVG 并将 fill 属性更改为您想要的任何颜色即可覆盖 SVG。
.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);
}
在主机组件上设置 encapsulation: ViewEncapsulation.None 并不是最佳实践。更明智的做法是将这些条目更改到您的项目 styles.scss (或 angular.json 中指定为全局样式文件的任何内容)
相反,::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');
}
// inverting color of the arrows
::ng-deep .carousel-control-next-icon,
::ng-deep .carousel-control-prev-icon {
filter: invert(1);
}
// setting the background color of the lower carousel-indicators
::ng-deep .carousel-indicators {
button[type='button'][role='tab'] {
background-color: black;
}
}