我正在开发Ionic 3中的移动应用程序,而我似乎无法解决有关布局的这个“简单”问题。
这是插图。左边是我得到的结果,右边是我想要达到的结果。我无法弄清楚为什么渐变覆盖了我的文字(应该是白色的)。
到目前为止,这是我的代码:
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图像的变量原因。
答案 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 */
}