如何將圖像放入兩者<ion-header>和<ion-content>在離子</ion-content></ion-header>

Question

我目前正在開發 Ionic 應用程序並堅持在 ion-header 和 ion-content 中實現圖像。

這是我如何實施的截圖。 正如您從屏幕截圖中看到的那樣，ion header 和 ion-content 內容被隱藏了，因為我將圖像z-index設置為高數字；

誰能建議如何實現這一目標？ 謝謝。

Answer 1

有一種更簡單的方法可以做到這一點，那就是使用ion-content組件 ( docs ) 中的fullscreen屬性。 所以訣竅是讓內容全屏，然后將 header 的背景設置為透明，這樣它就不會覆蓋背景。

模板：

<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding" fullscreen>
  ...
  ...
</ion-content>

Styles：

ion-toolbar {
  --ion-toolbar-background: transparent;
}

ion-content {
  --background: url('/assets/your_image.jpg') no-repeat center center / cover;
}

---

重要提示：目前有一個問題會導致背景圖像在某些特定情況下閃爍（ Github 問題）。 如果此問題影響您的應用，建議的解決方法是在組件中設置背景，而不是像這樣使用 css：

模板：

<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

<!-- The only change is the id added to the ion-content -->
<ion-content id="my-page-content" class="ion-padding" fullscreen>
  ...
  ...
</ion-content>

Styles：

ion-toolbar {
  --ion-toolbar-background: transparent;
}

ion-content {
  // Do not set the background here!
}

零件：

import { DomController } from '@ionic/angular';

// ...

@Component({...})
export class MyPage { 

  constructor(private domController: DomController) {}

  // ...

  ionViewWillEnter() {
    this.initializeBackground();
  }

  // ...

  private initializeBackground(): void {
    try {
      const content = document.querySelector('#my-page-content');
      const innerScroll = content.shadowRoot.querySelector('.inner-scroll');

      this.domController.write(() => {
        innerScroll.setAttribute(
          'style',
          'background: url("/assets/img/your_image.jpg") no-repeat center center / cover',
        );
      });
    } catch (e) {}
  }
}