设置离子选项卡的背景图片

Question

我试图为我的选项卡栏或导航栏设置背景图像。我可以将它设置为单个选项卡图标，但不能用于酒吧本身。

index.html的（体内的唯一标签）：

<ion-nav-view></ion-nav-view> 

tabs.html：

<div> 
<ion-tabs class="tabs-icon-top tabs-top tabs-back" ng-class="{'tabs-item-hide': hideTabs}" ng-controller="TabsController as Tabs"> 
    <ion-tab title="Back" class="tabs-color" icon="ion-arrow-left-a" on-select="Tabs.tabSelect('back')" hidden={{!Tabs.tabShow('back')}}> 
     <ion-nav-view name="tab-back"></ion-nav-view> 
    </ion-tab> 
    <ion-tab title="Play" class="tabs-color tabs-back" icon="ion-ios-game-controller-b" on-select="Tabs.tabSelect('play')" hidden={{!Tabs.tabShow('play')}}> 
     <ion-nav-view name="tab-play"></ion-nav-view> 
    </ion-tab> 
    <ion-tab title="Game" href="#/tabs/game" hidden='true'> 
     <ion-nav-view name="tab-game"></ion-nav-view> 
    </ion-tab> 
    <ion-tab title="Share" class="tabs-color" icon="ion-ios-camera" href="#/tabs/share" on-select="Tabs.tabSelect('share')" hidden={{!Tabs.tabShow('share')}}> 
     <ion-nav-view name="tab-share"></ion-nav-view> 
    </ion-tab> 
    <ion-tab title="Achievements" class="tabs-color" icon="ion-trophy" on-select="Tabs.tabSelect('achievements')" hidden={{!Tabs.tabShow('achievements')}}> 
     <ion-nav-view name="tab-achievements"></ion-nav-view> 
    </ion-tab> 
    <ion-tab title="Settings" class="tabs-color" icon="ion-ios-settings-strong" href="#/tabs/settings" on-select="Tabs.tabSelect('settings')" hidden={{!Tabs.tabShow('settings')}}> 
     <ion-nav-view name="tab-settings"></ion-nav-view> 
    </ion-tab> 
    <ion-tab title="Login" icon="ion-log-in" href="#/tabs/login" hidden={{!Tabs.tabShow('login')}}> 
     <ion-nav-view name="tab-login"></ion-nav-view> 
    </ion-tab> 
    <ion-tab title="Score" class="tabs-color" href="#/tabs/score" icon="ion-ribbon-a" on-select="Tabs.tabSelect('score')" hidden={{!Tabs.tabShow('score')}}> 
     <ion-nav-view name="tab-score"></ion-nav-view> 
    </ion-tab> 
    <ion-tab title="Time" class="tabs-color" href="#/tabs/achievements-time" icon="ion-ios-timer" on-select="Tabs.tabSelect('achievements-time')" hidden={{!Tabs.tabShow('achievements-time')}}> 
     <ion-nav-view name="tab-achievements-time"></ion-nav-view> 
    </ion-tab> 
    <ion-tab title="Moves" class="tabs-color" href="#/tabs/achievements-moves" icon="ion-ios-speedometer" on-select="Tabs.tabSelect('achievements-moves')" hidden={{!Tabs.tabShow('achievements-moves')}}> 
     <ion-nav-view name="tab-achievements-moves"></ion-nav-view> 
    </ion-tab> 
    <ion-tab title="Likes" class="tabs-color" href="#/tabs/achievements-likes" icon="ion-thumbsup" on-select="Tabs.tabSelect('achievements-likes')" hidden={{!Tabs.tabShow('achievements-likes')}}> 
     <ion-nav-view name="tab-achievements-likes"></ion-nav-view> 
    </ion-tab> 
    <ion-tab title="Tutorial" href="#/tabs/tutorial" hidden='true' hide-tabs> 
     <ion-nav-view name="tab-tutorial"></ion-nav-view> 
    </ion-tab> 
    <ion-tab title="Message" href="#/tabs/message" hidden='true' hide-tabs> 
     <ion-nav-view name="tab-message"></ion-nav-view> 
    </ion-tab> 
</ion-tabs> 
</div> 

CSS：

.tabs回{ 背景图像：url（“../ img/background4.jpg”）！重要; background-size：cover; }

现在制表符后退的CSS适用于离子选项卡（播放），但不适用于离子选项卡。我想我应该把这个课程设置为导航栏，但我认为我没有... 我相信我正在做一些根本性的错误，但我是一个初学者，所以不知道该怎么做。

请帮帮忙，谢谢

后下“检查元素”进一步手动更改类我已经发现，从拳头“DIV”类删除“标签”，并加入“标签回”出现的背景图像。所以我想我需要重写离子的'标签'CSS声明。如果你认为我是正确的，我可以在哪里编辑它？

<div class="tab-nav tabs"> 
    <ion-tab class="tabs-color" icon="ion-arrow-left-a" on-select="Tabs.tabSelect('back')" hidden="true"></ion-tab> 
    <ion-tab class="tabs-color tabs-back" icon="ion-ios-game-controller-b" on-select="Tabs.tabSelect('play')" hidden="false"></ion-tab> 
    <ion-tab href="#/tabs/game" hidden="true"></ion-tab> 
    <ion-tab class="tabs-color" icon="ion-ios-camera" href="#/tabs/share" on-select="Tabs.tabSelect('share')" hidden="false"></ion-tab> 

Answer 1

如果您正在使用ion-tabs指令，那么类名称不是选项卡栏的类名称。相反，你将有当您运行代码，打开使用类名来引用标签栏

.tabs-back .tab-nav{ 

    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("../img/background4.jpg") !important; background-size: cover; 
}