How to put image in both and in Ionic

问题

I'm currently developing Ionic app and stuck at implementing image in both ion-header and ion-content.

Here's screenshot how I implemented. As you can see from screenshot, ion header and ion-content contents are hidden because I set image z-index to high number;

Could anyone please suggest how to achieve this? Thanks.

回答1:

There's an easier way to do that, and it's by using the fullscreen property from the ion-content component (docs). So the trick is to make the content to be fullscreen and then to set the background of the header to be transparent so that it doesn't cover the background.

Template:

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

Important: There's currently an issue that makes the backgroung image to flicker in some specific scenarios (Github issue). If this issue affects your app, the recommended workaround is to set the background in the component instead of by using css like this:

Template:

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

Component:

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

来源：https://stackoverflow.com/questions/64014659/how-to-put-image-in-both-ion-header-and-ion-content-in-ionic

标签

css