Страница вкладок прозрачная с фоновым изображением

Question

У меня есть приложение на странице вкладок. У меня есть фоновое изображение, как так. Как я могу иметь прозрачные вкладки, как показано ниже?

home.html

<ion-content class="content" fullscreen>


  <ion-grid>
    <ion-row class="ion-margin-top row1">
      <ion-col size="12" class="ion-text-center">

      </ion-col>
    </ion-row>

    <ion-row class="ion-margin-top row2">
      <ion-col size="6" *ngFor="let b of buttons;" class="padding">
        <app-home-root [data]="b"></app-home-root>
      </ion-col>
    </ion-row>

  </ion-grid>
</ion-content>

home.scss

ion-content {
    --background: url('/assets/img/stella/background/background.png') no-repeat 100% 100%;
}

tabs.page.html

<ion-tabs>
  <ion-tab-bar class="tab" slot="bottom" translucent="true">
    <ion-tab-button (click)="profileAction()">
      <ion-img [src]="myProfileSrc"></ion-img>
      <ion-label>
        My Profile
      </ion-label>
    </ion-tab-button>


    <ion-tab-button (click)="openBooking()">
      <ion-img [src]="bookNowSrc"></ion-img>
      <ion-label>Book Now</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

Это то, что у меня сейчас есть translucent="true"

Answer 1

Ion-content не продолжается под вкладками (это видно, когда вы проверяете его при запуске в браузере), поэтому прозрачность вкладок покажет только фоновый цвет приложения.Я не знаю, возможно ли даже сделать его прозрачным, но поскольку это не имеет значения, вы всегда можете просто применить цвет фона к ion-tabs (тот же цвет, что и у ion-content).

Редактировать:

И если вы тоже хотите удалить границу, этого должно быть достаточно:

ion-tab-bar {
    --background: #FFF;
    border-style: none;
}

Если вы все еще видите границу, вы всегда можете добавить border: 0;.