2016-06-12 9 views
0

私はので、私はイオンナビゲーションバーのスタイルを変更するには?

<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の背景色を設定したいです。しかし、バーの背景はまだ白ですか?

<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> 

答えて

1

あなたはイオンヘッダーバー要素に背景色を適用する必要があります。 例:

.backarrow-bar { 
    background-color': rgba(255, 0, 0, 0.5); 
} 
関連する問題