覆盖文本的Ionic 3背景图像叠加(HTML& CSS)

时间:2017-10-24 22:12:52

标签: css html5 overlay gradient ionic3

我正在开发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>

和CSS:

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图像的变量原因。

1 个答案:

答案 0 :(得分:0)

我想我发现了这个问题。它在您的离子电池中:

 ion-col {
        z-index: 0;
        height: 100%;
        position: absolute;
        opacity: 0.8; /* Here's the issue */
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    }

渐变叠加不会覆盖文本,只是您已将div的不透明度设置为.8,这将影响其所有子元素。

这是另一种解决方案:

ion-col {
        z-index: 0;
        height: 100%;
        position: absolute;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 100%); /* I added the 0.8 opacity here, to the last rgba which won't affect the child element */
    }