css - 如何在 Ionic 中将图像同时放入 和

Question

我目前正在开发 Ionic 应用程序并坚持在 ion-header 和 ion-content 中实现图像。
这是我如何实现的屏幕截图。
从截图中可以看出， ionic 标题和 ion-content 内容被隐藏，因为我设置了图像 z-index到高数；

任何人都可以请建议如何实现这一目标？
谢谢。

Answer 1

有一种更简单的方法可以做到这一点，那就是使用 fullscreen来自 ion-content 的属性(property)组件 ( docs )。所以诀窍是让内容全屏，然后将标题的背景设置为透明，使其不覆盖背景。
模板:

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

款式:

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

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

重要提示:当前存在一个问题，导致背景图像在某些特定场景中闪烁 ( Github issue )。如果此问题影响您的应用程序，建议的解决方法是在组件中设置背景，而不是像这样使用 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>

款式:

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) {}
  }
}