Question

我想将ion-nav-bar的背景颜色设置为自定义颜色，所以我做了

<ion-nav-bar class="backarrow-bar" ng-style="{'background-color': rgba(255, 0, 0, 0.5)}" style="background-color:rgba(255, 0, 0, 0.5)">
    <ion-nav-back-button class="button-clear">
        <i class="ion-chevron-left" style="color:#ffffff;text-shadow: 2px 4px 3px rgba(0,0,0,0.3);"></i>
    </ion-nav-back-button>
</ion-nav-bar>

Chrome检查显示生成了以下代码。但是，酒吧的背景仍然是白色的？

<ion-nav-bar class="backarrow-bar nav-bar-container" ng-style="{'background-color': rgba(255, 0, 0, 0.5)}" style="background-color:rgba(255, 0, 0, 0.5)" nav-bar-transition="android" nav-bar-direction="forward" nav-swipe="">
        <ion-nav-back-button class="hide"></ion-nav-back-button>
    <div class="nav-bar-block" nav-bar="cached"><ion-header-bar class="backarrow-bar bar bar-header" align-title="left"><button class="button back-button hide buttons button-clear header-item" ng-click="$ionicGoBack()">
            <i class="ion-chevron-left" style="color:#ffffff;text-shadow: 2px 4px 3px rgba(0,0,0,0.3);"></i>
        <span class="back-text"></span></button><div class="title title-left header-item"></div></ion-header-bar></div><div class="nav-bar-block" nav-bar="active"><ion-header-bar class="backarrow-bar bar bar-header" align-title="left"><button class="button back-button buttons button-clear header-item" ng-click="$ionicGoBack()">
            <i class="ion-chevron-left" style="color:#ffffff;text-shadow: 2px 4px 3px rgba(0,0,0,0.3);"></i>
        <span class="back-text"></span></button><div class="title title-left header-item" style="left: 24px;"></div></ion-header-bar></div></ion-nav-bar>

Answer 1

您需要将背景颜色应用于 ion-header-bar 元素。例如：

.backarrow-bar {
    background-color': rgba(255, 0, 0, 0.5);
}

如何改变离子导航栏的风格？

1 个答案: