带有背景图像的透明标签页

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;。