Как сделать вкладку материала Angular прозрачной?

Question

Я делаю страницу angular и не могу найти способ сделать прозрачными вкладки angular материала. Это код HTML:

<nav mat-tab-nav-bar backgroundColor="primary" color="primary">
  <a mat-tab-link *ngFor="let link of navLinks" [routerLink]="link.link" routerLinkActive #rla="routerLinkActive"
    [active]="rla.isActive">
    {{link.label}}
  </a>
</nav>

Я уже пробовал:

.mat-tab-link {
  opacity: 0;
}

, что делает все мои вкладки матов прозрачными. И мне просто нужно сделать фон прозрачным, есть ли способ сделать это?

Answer 1

Вам необходимо установить свойство background и использовать альфа-канал при настройке цвета:

.mat-tab-link {
  background: rgba(0,0,0,0);
}

Answer 2

Если вы используете Bootstrap, вы можете добавить класс .bg-transparent к вашему nav, например, так:

<nav mat-tab-nav-bar backgroundColor="primary" color="primary" class="bg-transparent">

Более подробную информацию можно найти здесь .