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种方法：

将图像设置为background-url到最外面的容器。然后在此容器中指定标题和其他内容。
最外面的容器将有position: relative。在此容器中放置您的图像<img/>。所有其他内部容器（标题等）将具有position: absolute;然后相应的实际位置。与top: 5%; left: 5%;

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

在ionic2Slides中显示图像上的标题

1 个答案: