在Ionic2滑块中显示图像标题

如何在ionic1幻灯片中的图像上添加文本

我需要在爱奥尼亚幻灯片中的图像上显示文本。我需要设置的文本的样式表值应该是多少？ 这是产权

.slide-title {
    margin-top: 2.8rem;

  }

这是图像属性

.slide-image {
    max-height: 100%;
    max-width: 100%;
    margin: 18px 0;
  }

下面是显示幻灯片的代码

<ion-slides pager>
    <ion-slide *ngFor="let slide of slides">
      <ion-toolbar>
        <ion-buttons end>
          <button ion-button color="primary">Skip</button>
        </ion-buttons>
      </ion-toolbar>
      <img [src]="slide.image" class="slide-image" width="100%" height="100%"/>
      <h2 class="slide-title" [innerHTML]="slide.title"></h2>
      <p [innerHTML]="slide.description"></p>
    </ion-slide>
    <ion-slide>
      <ion-toolbar>
      </ion-toolbar>
      <img src="assets/img/ica-slidebox-img-4.png" class="slide-image"/>
      <h2 class="slide-title">Ready to Play?</h2>
      <button ion-button large clear icon-right color="primary">
        Continue
        <ion-icon name="arrow-forward"></ion-icon>
      </button>
    </ion-slide>
  </ion-slides>
</ion-content>

跳过

准备好比赛了吗？
继续

2种方法：

将图像设置为最外层容器的

背景url

。然后指定此容器中的标题和其他内容

最外层的容器将具有

位置：相对
。将图像
放入此容器中。所有其他内部容器（标题等）将具有
位置：绝对然后是相应的实际位置。如
top:5%；左：5%

我过去在我的应用程序中尝试过这两种解决方案。两者都有效。但没有尝试使用您的代码。如果需要，请告诉我具体情况