ionic 4 - 为整页设置背景图片答案

【问题标题】：ionic 4 - Set background image for full pageionic 4 - 为整页设置背景图片
【发布时间】：2019-09-24 06:07:59
【问题描述】：

我正在尝试使用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",
}

谢谢。

【问题讨论】：

标签： css ionic-framework background-image footer ionic4

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：