Question

我正在应用程序上添加滑块图像，但无法在图像内覆盖文本。

  <ion-slides   *ngIf="getData.length>0" autoplay="2700" speed="300" class="slideroption" pager="true" loop="true">[![enter image description here][1]][1]
      <ion-slide *ngFor="let item of getData" (click)="openItem(item)"> 
          <img src="{{item.jetpack_featured_media_url}}" class="new-collection" /> 
          <h4  [innerHTML]="item.title.rendered"></h4>
      </ion-slide>
    </ion-slides>

Answer 1

在CSS下方的h4标签上使用。

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

HTML

<h4 class="centered"  [innerHTML]="item.title.rendered"></h4>

stackblitz example

如何在图像内叠加文本和寻呼机？

1 个答案: