Как изменить стиль ионной панели навигации?

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

Вы должны применить цвет фона для ионным заголовка-бар элемента. пример:

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