代码之家 › 专栏 › 技术社区 › cobster

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

ionic3 gradient overlay html css

cobster · 技术社区 · 8 年前

我正在用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图像有一个变量。

1 回复 | 直到 8 年前

user3668347 user3668347 8 年前

我想我发现了这个问题。它在你的ion col分区中:

 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 */
    }

推荐文章