我有一个离子侧菜单.我想添加background-image.Side -Menu代码如下.
<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>
您可以按如下方式定义自定义CSS：
.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;
}
并将这些类应用于适当的HTML项目：
<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>
这是一个codepen：http://codepen.io/beaver71/pen/WrqgNm
