整个Ionic（4）页面的背景图像不重叠页眉和页脚

我正在将Ionic 3项目迁移到Ionic 4，偶然发现了页面特定背景图片的问题，该背景图片在Ionic 3中效果很好，但在Ionic 4中效果不佳。

页面上的图像应覆盖整个页面，但是该页面也包含ion-header和ion-footer组件。
在我的Ionic 3中，html如下所示：

使用scss：

page-login {
.content {
background: url('../assets/img/background.png') no-repeat;
background-size: cover;
#logo {
padding-top: 5rem;
}
form {
position: absolute;
bottom: 0;
width: 100%;
.logo-row {
margin-bottom: 40%;
}
.form-inputs {
.label-ios {
width: 60px;
max-width: 60px;
}
}
}
}
}


结果：

在Ionic 4中，页眉和页脚的行为有所不同，由于某种原因，我必须将ion-tool bar中的transparent scss移到{{1} }和ion-header在ion-footer内以使图像ion-content重叠：

scss

ion-toolbar {
--background: transparent;
//--ion-toolbar-text-color: white;
//--ion-color-base: transparent !important;
}
ion-content {
--background: url('../../../assets/img/background.png') no-repeat center/cover fixed;
--background-size: cover;
#logo {
padding-top: 5rem;
}
form {
--position: absolute;
--bottom: 0;
--width: 100%;
// rest of scss..
}
}
：

html

这对我来说似乎没有意义，必须有一种方法可以将html中的





















更新
@Sergey Rudenko提出的答案在一定程度上可以起作用，背景图像可以正确显示，但是缺点是ion-content上的position: absolute不会将footer元素推到页脚上方，相反，表单元素位于页脚上方/上方：

抱歉，如果我不能完全理解您的情况，但是您不能执行以下操作：

模板：




Ionic 4 template







Hit Me




SCSS：

ion-toolbar {
--background: transparent;
--ion-color-base: transparent !important;
}
ion-content {
--background: url('https://via.placeholder.com/150') no-repeat center/cover fixed;
--background-size: cover;
}
ion-header,ion-footer {
border: 0px !important;
border-bottom-color: transparent !important;
background-image: none !important;
border-bottom: none !important;
}


取决于您的用例，可能不是使用“绝对”位置而是“固定”位置等？