Ionic 3背景图像覆盖(HTML和CSS)覆盖文本

我正在用Ionic 3开发一个移动应用程序,我似乎无法解决关于布局的这个“简单”问题。

这是插图。左边是我得到的结果,右边是我想要达到的结果。我不明白为什么渐变覆盖了我的文本(应该是白色的)。

LINK TO IMAGE

这是我目前的代码:

HTML

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-grid [style.padding]="0">
    <ion-row [style.backgroundImage]="'url(' + img1 + ')'">
      <ion-col>
        <h1>HEADER</h1>
      </ion-col>
    </ion-row>
    <ion-row [style.backgroundImage]="'url(' + img2 + ')'">
      <ion-col>
        <h1>HEADER</h1>
      </ion-col>
    </ion-row>
    <ion-row [style.backgroundImage]="'url(' + img1 + ')'">
      <ion-col>
        <h1>HEADER</h1>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

page-home {
    scroll-content {
        display: flex;
        flex-direction: column;
    }
    ion-grid {
        height: 100%;
    }
    ion-row {
        flex: 1;
        background-size: cover;
    }
    ion-col {
        z-index: 0;
        height: 100%;
        position: absolute;
        opacity: 0.8;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    }
    h1 {
        color: white;
    }
}

我尝试了行-列系统的不同组合,也在列中添加了两个div,并将图像和效果应用于它们,尝试了z-index,但没有任何效果。 此外,这些行可能会使用 *ngFor 并填充了提取的内容,这就是为什么bg图像有一个变量。