ionic 3イオンタブの背景としての画像設定

Question

タブバーを画像として単色で設定する必要があります。私tabs.htmlは、それが画像をレンダリングするdoesntの方法

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

のように見えます。クロムDEVコンソールで、私はクラスが適用されますが、あなたはあなたのイオンタブのの背景を設定している

Answer 1

それが失敗している理由は考えを示さないために見ることができます。サイズはフルスクリーンで、現在のアクティブなタブでオーバーラップしています。だからあなたはそれを見ることができません。 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; 
}