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; 背景尺寸：封面; }

现在tab-back css适用于ion-tab（播放），但不适用于ion-tabs。我以为我应该将这个课程设置为导航栏，但我认为我没有... 我相信我做的事情根本就错了，但我是初学者所以不知道该怎么做。

请帮忙，谢谢

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

为离子标签设置背景图像

1 个答案: