Question

我需要将标签栏设置为图像而不是纯色。我的tabs.html看起来像

<ion-tabs color="ferrari-bg" class="ferrari-tabs">
  <ion-tab [root]="tab1Root" tabIcon="people-outline"></ion-tab>
  <ion-tab [root]="tab1Root" tabIcon="speedometer"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabIcon="calendar"></ion-tab>
    <ion-tab [root]="tab3Root" tabIcon="film"></ion-tab>

</ion-tabs>

和app.scss

.ferrari-tabs{

    background-color: transparent  !important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
    background-image: url("../assets/images/footer.png") !important; background-size: cover; 
 }

它如何渲染图像。在chrome dev控制台中，我可以看到该类已应用，但不知道为什么它无法显示

Answer 1

您正在为 ion-tab s 设置背景。它的大小是全屏，它与当前活动标签重叠。所以你看不到它。如果您想为tab bar设置背景，只需设置.show-tabbar类的样式。

.show-tabbar{
    background-color: transparent  !important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
    background-image: url("../assets/images/footer.png") !important; background-size: cover; 
 }

离子3设置图像作为离子标签的背景

1 个答案: