テキストをカバーするIonic 3背景画像オーバーレイ（HTML＆CSS）

Question

私は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; 
    } 
} 

、列内に2つのdivを追加して、イメージとエフェクトをm、z-indexで試しましたが、何も動作しません。 また、行はおそらく*ngForで生成され、取得されたコンテンツが格納されるため、bgイメージの変数があるのはこのためです。

Answer 1

私は問題を発見したと思います。それはあなたのイオン-COL divの中にあります：

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%); 
    } 

グラデーションオーバーレイはテキストをカバーしていない、それはすべてのそれの子要素に影響を与えるであろうあなたが0.8にdiv要素の不透明度を設定しただけのことです。ここで

は、代替ソリューションです。申し訳ありません

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