如何在Ionic 3中实现文本的图像叠加

Question

我正在使用Ionic 3,我希望在Ionic 3中的图像卡组件上的图像中实现以下效果

Answer 1

通过使用离子卡,

<ion-content class="has-header">
  <ion-card class="myCard">
    <img src="https://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg"/>
    <div class="myOverlay">
       <div class="card-title">San Francisco</div>
       <div class="card-subtitle">72 Listings</div>
    </div>
  </ion-card>
</ion-content>

并将css更改为

img{
  width:100%;
  height:100%;
}

.myCard{
  position:relative;

}

.myOverlay{
    width: 100%;
    height: 60px;
    position: absolute;
    z-index: 99;
    bottom: 0px;
    opacity: 0.5;
    background: #000;
    color: #fff;

}