ionic 4-设置整页的背景图像

Question

我正在尝试为具有footer内容的整页设置背景图像

<ion-content class='background' fullscreen>
</ion-content>
<ion-footer no-border>
    <ion-row>
        <ion-col><ion-button size="large" fill='outline' expand="block" color="primary" (click)="goSearch()">English</ion-button></ion-col>
        <ion-col><ion-button size="large" fill='outline' expand="block" color="secondary" (click)="goSearch()">العربية</ion-button></ion-col>
    </ion-row>
</ion-footer>

以上代码未将背景图片设置为整页，而是将页面显示为

我试图将离子行设置为透明，但无法正常工作。

ion-row {
  --background: transparent;
  --ion-color-base: transparent !important;
}

但是如果我将其删除或放在页脚中，它将按预期工作。

<ion-footer no-border>
    <ion-button size="large" fill='outline' expand="block" color="primary" (click)="goSearch()">English</ion-button>
    <ion-button size="large" fill='outline' expand="block" color="secondary" (click)="goSearch()">العربية</ion-button>
</ion-footer>

由于需要添加更多控件，是否有任何方法可以使页脚中的元素透明？

版本：

"dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic/angular": "^4.1.0",
}

谢谢。

Answer 1

<ion-header translucent="true" no-border>
    <ion-toolbar>
       <ion-buttons color="secondary" slot="start">
          <ion-back-button color="secondary" text="" icon="arrow-round-back"></ion-back-button>
       </ion-buttons>
    <ion-title></ion-title>
</ion-toolbar>

<ion-content fullscreen="true" class="background">
   <!-- Content here  -->
</ion-content>

Answer 2

.background {
  --background: url("/assets/icon/background.jpg") 0 0/100% 100% no-repeat
 }