Angularjs 如何将背景图像添加到爱奥尼亚侧菜单

我有爱奥尼亚的配菜。我想添加背景图像。侧菜单代码如下所示

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

菜单
仪表板
统计

---

这是一个代码笔：

我不知道这是否是正确的方法，但你可以在你的

仪表板
统计

---

这可能会对您的情况有所帮助。

我尝试了css代码，但任何地方都是透明的，没有显示图像。

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