如何将图片同时放在< ion-header>和< ion-content>在离子 [英] How to put image in both <ion-header> and <ion-content> in Ionic

问题描述

我目前正在开发Ionic应用程序，并坚持在离子标题和离子含量方面实现图像.

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

以下是我的实现方式的屏幕截图.从屏幕截图中可以看到，由于我将图像 z-index 设置为高数字，因此隐藏了离子标题和离子含量内容；

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.

推荐答案

有一种更简单的方法，那就是使用 ion-content fullscreen 属性>组件(文档).因此，诀窍是使内容变为全屏，然后将标题的背景设置为透明，以使其不覆盖背景.

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.

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

---

重要提示::当前存在一个问题，该问题会使backgroung图像在某些特定情况下闪烁(

---

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:

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

这篇关于如何将图片同时放在< ion-header>和< ion-content>在离子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！