html - ionic : background-image not applying correctly

Question

我有一个(长)页面，其中包含 ion-list 和 ion-grid 中的许多 ion-scroll。我正在尝试特别将背景图像应用于此页面。它在另一个页面上运行良好(更少的 html)

示例.html:

<ion-content no-padding overflow-scroll="true" class="test">
 <ion-refresher (ionRefresh)="refreshHome($event)">
   <ion-refresher-content></ion-refresher-content>
 </ion-refresher>
 <img [src]="banner.png"/>
 <ion-list class="category_list" *ngIf="tags_home && tags_home[0]">
   <div *ngFor='let tag_selected of tags_home' class="category">
    <ion-grid no-padding align-items: center>
      <ion-row>
        <ion-col>title
        </ion-col>
        <ion-col col-auto>
          <button>button</button>
        </ion-col>
      </ion-row>
    </ion-grid>
    <ion-scroll scrollX="true" direction="x">
      <img *ngFor="let item of tag_selected.slide" [src]="item.img"/>
    </ion-scroll>

示例.css:

  ion-content {
   .category_list {
     bottom: 0;
     height: 62vh;
     .category { ... }
    }
  }

我尝试在 ion-content(和 ion-list)下添加 background-image 但没有任何显示(在其他页面上工作没有任何问题)。在 .category_list 下添加背景只会显示大约 30% 的页面(它甚至在滚动之前就停止了)。

在 Chrome 检查器中检查 css，我添加了一个带有 background-image 的 scroll-content 类。整个页面都显示了背景，但每个 ionic 卷轴都有其自己的背景......

我尝试使用 :not() 但失败了(要么根本没有背景，要么没有结果，要么在“真实”背景上丢失了背景大小)

我很确定 ionic 卷轴弄乱了我的背景，因为它们没有出现在其他页面上。

编辑:在我的样本中不是为了避免困惑，但我的横幅前有一个 ion-refresh ......这个 ion-refresh 确实有背景当它被放置在 ion-content 下时。正确删除它会在整个页面上显示背景。但是我需要这个 ion-refresh...

Answer 1

尝试为 <ion-content> 设置背景像这样，

<ion-content padding style="background-image:url('your-img-path/url');background-position: center;background-repeat: no-repeat; background-size: cover;">