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

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一样）。< / p>

编辑：

如果您也想删除边框，这应该足够了：

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

如果仍然看到边框，则可以随时添加border: 0;。