I have an Ionic 3 app with a sidemenu, and I would like to make the transparent background , but not the header, footer and content text. Something like opacity 0.45, but when I do, the text also takes the opacity, which I do not want. I will appreciate the help you can give me, thank you very much!
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menú</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-avatar class="avatar" >
<img src="../../assets/imgs/sssss.png">
</ion-avatar>
<ion-list>
<button ion-item detail-none block menuClose *ngFor="let p of pages" (click)="openPage(p.page)">
<ion-icon item-start [name]="p.icon"></ion-icon>
{{ p.title }}
</button>
</ion-list>
</ion-content>
<ion-footer >
<ion-toolbar>
<ion-row align-items-center>
<ion-col>
<button ion-button full clear icon-left (click)="logout()">
Logout
</button>
</ion-col>
</ion-row>
</ion-toolbar>
</ion-footer>
</ion-menu>
<ion-nav #content main [root]="rootPage"></ion-nav>
CSS
.menu-inner .item {
background-color: transparent;
}
.ion-header {
background-color: transparent;
}
.menu-inner > ion-header,
.menu-inner > ion-content,
.menu-inner > ion-footer, {
background-color: transparent;
}
.toolbar-title {
color : #000000;
text-align: center;
}