css - 为 ion-tabs 设置背景图片

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

现在 tabs-back css 适用于 ion-tab(播放)但不适用于 ion-tabs。我在想我应该将此类设置为导航栏，但我认为我没有... 我相信我做的事情从根本上是错误的，但我是初学者所以不知道该怎么做。

求助，谢谢

在进一步手动更改“inspect element”下的类后，我发现从第一个“div”类中删除“tabs”并添加“tabs-back”背景图像出现。所以我想我需要覆盖 ionic 的 'tabs' 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; 
 }