css - 全屏背景图像和切换标题的可见性

Question

我尝试在我的 ionic 元素中加载全屏背景图像并切换标题(显示/隐藏)。不幸的是， fullscreen=true 似乎不起作用。

模板:

<ion-header (click)="toggleHeaderClass()" [ngClass]="isTransparent ? 'transparent' : ''">
  <ion-toolbar>
      <ion-buttons slot="start">
          <ion-back-button defaultHref="home"></ion-back-button>
      </ion-buttons>
    <ion-title>Title</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content 
  fullscreen="true"
  class="contentContainer"
  [ngStyle]="{'background-image': 'url(' + background + ')'}"
  [routerLink]="['/show', id, filterId, custom"
  routerDirection="root">
...

---

仍然不是完美的解决方案，但它对我有用! ( ionic 内容中的工具栏):

<ion-content 
  [ngStyle]="{'background-image': 'url(' + imgSrc + ')'}">

      <ion-toolbar
        [ngClass]="{ 'visable' : hovering }"
        (click)="hovering=true">
          <ion-buttons slot="start" *ngIf="hovering" (click)="doSomething()">
            <ion-icon class="homeIcon" size="large" name="home"></ion-icon>
          </ion-buttons>
      </ion-toolbar>
      ...

Answer 1

尝试将所有边的内容填充设置为零。在 [the Ionic Documentation][1] 中阅读更多内容。