ionic 8 离子含量背景图像未正确显示离子页眉和离子页脚

Question

我使用 ionic 8 和 Angular 18，并且 我希望页眉和页脚是透明的，并在全屏模式下显示离子内容背景图像，在它们后面。

我使用以下代码：

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title style="--opacity:1">
      Main
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="main ion-padding" [fullscreen]="true">
  <p></p>
</ion-content>

<ion-footer [translucent]="true">
  <ion-toolbar>
    <ion-item>
      <ion-img slot="end" id="logo" src="/assets/images/logo.svg"></ion-img>
    </ion-item>
    <ion-item>
      <ion-note slot="end" color="light">
          title
     </ion-note>
    </ion-item>
    <ion-row class="ion-justify-content-center">
      <ion-button style="--opacity:1">submit</ion-button>
    </ion-row>
  </ion-toolbar>
</ion-footer>

在 SCSS 文件中：

ion-content.main {
    --background: url('/assets/images/landing.png') center/cover;
}

#logo {
    width: 25%;
}

但是，它没有正确显示：

Answer 1

translucent

属性仅在

ios

模式下有效。

我建议添加一个

div

并将

ion-content

、

ion-header

和

ion-footer

包裹在

div

中，并将背景图像添加到 div 上，而不是添加到

ion-content

上。

然后使用 css 将

ion-toolbar

和

ion-content

的背景设置为透明。

<div class="page">
  <ion-header>
    <ion-toolbar>
      <ion-title style="--opacity:1">
        Main
      </ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content class="main ion-padding" [fullscreen]="true">
    <p></p>
  </ion-content>

  <ion-footer>
    <ion-toolbar>
      <ion-item>
        <ion-img slot="end" id="logo" src="/assets/images/logo.svg"></ion-img>
      </ion-item>
      <ion-item>
        <ion-note slot="end" color="light">
          title
       </ion-note>
      </ion-item>
      <ion-row class="ion-justify-content-center">
        <ion-button style="--opacity:1">submit</ion-button>
      </ion-row>
    </ion-toolbar>
  </ion-footer>
</div>

.page {
  background: url('https://picsum.photos/seed/picsum/200/300') center/cover;
}
.main, ion-toolbar {
  --background: transparent;
}