Wie Hintergrundbild zu ionischen Seite Menü hinzufügen

Question

Ich habe eine ionische Seite Menü.Ich möchte Hintergrund-Bild hinzufügen.Seite -Menu Codes folgen.

<ion-side-menus enable-menu-with-back-views="true"> 
<ion-side-menu-content> 
    <ion-nav-bar class="bar-dark"> 
     <ion-nav-back-button> 
     </ion-nav-back-button>  
     <ion-nav-buttons side="left"> 
      <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button> 
     </ion-nav-buttons> 
     <ion-nav-buttons side="right"> 
      <button class="button button-icon button-clear ion-log-out" ng-click="logout()"></button> 
     </ion-nav-buttons>   
    </ion-nav-bar> 
    <ion-nav-view name="menuContent" style="background-color:red;"> 
    </ion-nav-view> 
</ion-side-menu-content> 
    <ion-side-menu side="left"> 
     <ion-header-bar class="bar-dark"> 
      <h1 class="title">Menu</h1> 
     </ion-header-bar> 
     <ion-content> 
      <ion-list> 
       <ion-item menu-close href="#/app/dashboard"> 
        <i class="icon icon-dashboard" style="font-size:20px;margin-right:10px;"></i> 
        Dashboard 
       </ion-item> 
<ion-item menu-close href="#/app/dashboard"> 
        <i class="icon icon-dashboard" style="font-size:20px;margin-right:10px;"></i> 
        Statistics 
       </ion-item>    
      </ion-list> 
     </ion-content> 
    </ion-side-menu> 
</ion-side-menus> 

Wie Hintergrundbild ionischen Seite Menü

Answer 1

Sie Ihre CSS benutzerdefinierte definieren können wie folgt hinzufügen:

.my-container { 
    background-image: url("http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"); 
    background-repeat: repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    height: 100%; 
    position: absolute; 
} 
.transp .item-content { 
    background-color: transparent !important; 
    color: #fff; 
} 

und diese Klassen, um die ordnungsgemäße HTML Elemente anwenden:

<ion-side-menu side="left"> 
    <ion-header-bar class="bar-dark"> 
     <h1 class="title">Menu</h1> 
    </ion-header-bar> 
    <ion-content class="my-container"> 
     <ion-list> 
      <ion-item class="transp" menu-close href="#/app/dashboard"> 
       <i class="icon icon-dashboard" style="font-size:20px;margin-right:10px;"></i>Dashboard 
      </ion-item> 
      <ion-item class="transp" menu-close href="#/app/dashboard"> 
       <i class="icon icon-dashboard" style="font-size:20px;margin-right:10px;"></i>Statistics 
      </ion-item>    
     </ion-list> 
    </ion-content> 
</ion-side-menu> 

Hier ist ein Codepen: http://codepen.io/beaver71/pen/WrqgNm

Answer 2

Nun, ich weiß nicht genau, ob dies der richtige Weg sein würde, aber man kann versuchen, diese in Ihrem <ion-content> </ion-content>

<ion-content style="background: url('img/a.jpg'); background-size: cover;"> 
    <ion-list> 
     <ion-item menu-close href="#/app/dashboard"> 
      <i class="icon icon-dashboard" style="font-size:20px;margin-right:10px;"></i> 
       Dashboard 
     </ion-item> 
     <ion-item menu-close href="#/app/dashboard"> 
      <i class="icon icon-dashboard" style="font-size:20px;margin-right:10px;"></i> 
       Statistics 
     </ion-item>    
    </ion-list> 
</ion-content> 

Es könnte Ihren Fall helfen.