css - 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 设置为透明，但它没有按预期工作。

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",
}

谢谢。

标签： cssionic-frameworkbackground-imagefooterionic4

Answer 1

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