在ionic2幻灯片中的图像上显示标题

Question

如何在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>

Answer 1

2 种方法：

1. 将映像设置为background-url到最外层的容器。然后在此容器中指定标题和其他内容。

2. 最外层的容器将有position: relative .将映像<img/>在此容器中。所有其他内部容器（标题等）将具有position: absolute;，然后相应地进行实际位置。喜欢top: 5%; left: 5%;

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