Css 如何将图像放在两者中<；离子头>；及<；离子含量>；在爱奥尼亚

我目前正在开发Ionic应用程序，并致力于在ion标题和ion内容中实现图像

下面是我如何实现的屏幕截图。 从截图中可以看到，离子标题和离子内容是隐藏的，因为我将image

z-index

设置为高位

有谁能建议如何做到这一点？

---

谢谢。

有一种更简单的方法可以做到这一点，那就是使用

ion content

组件（）中的

fullscreen

属性。所以诀窍是将内容设置为全屏，然后将标题的背景设置为透明，这样它就不会覆盖背景

模板：

---

重要提示：当前存在一个问题，使得背景图像在某些特定场景中闪烁（）。如果此问题影响到您的应用程序，建议的解决方法是在组件中设置背景，而不是像这样使用css：

模板： 组成部分：

---

您好，谢谢您的回答，顺便说一句，问题是，正如您可以从我的截图中看到的，应用程序包含两个白色遮罩图像（一个在左上角，一个在右上角），这些图像应该是固定大小的，屏幕应该是响应的。有什么想法吗？@SvetoslavAtanasov我想你可以用一些元素来做这个。你能不能用这些图片创建一个stackblitz项目，这样我就可以重现这个问题，看看如何解决它？

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

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