为整个侧边菜单设置渐变背景颜色答案

【问题标题】：Set gradient background color to the entire Side-menu为整个侧边菜单设置渐变背景颜色
【发布时间】：2018-02-10 10:10:57
【问题描述】：

我创建了Ionic 3 side menu 项目。现在我需要为整个侧边菜单设置渐变背景颜色。这似乎是一项简单的任务。但它不起作用。请问有什么想法吗？

app.html

<ion-menu [content]="content">
  <ion-content class="background-gradient">
    <ion-list no-lines>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)" class="border-none" outline>
          <ion-icon [name]="p.icon" item-left></ion-icon> {{p.title}}
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

app.component.ts

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = HomePage;

  pages: Array<{ title: string, component: any, icon: string }>;

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Home', component: HomePage, icon: 'game-controller-b' },
      { title: 'Activity', component: '', icon: 'browsers' },
      { title: 'Contacts', component: '', icon: 'play' },
      { title: 'Add Project', component: '', icon: 'settings' },
      { title: 'Settings', component: '', icon: 'settings' }
    ];

  }

app.scss

.background-gradient {
    background: -webkit-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%);
}

.border-none {
    border: none;
   }

现在看起来像这样：

问：您能告诉我如何将gradient background color 也添加到menu items 中吗？即整个side menu。我尝试了很多方法。但还没有运气:(

【问题讨论】：

标签： html css sass ionic3

【解决方案1】：

为菜单项添加透明背景可以解决这个问题：

.border-none{
   border: none;
   background: transparent;
}

【讨论】：