Я пытаюсь добавить txt поверх блока содержимого HTML изображения. Каждый раз, когда я пробую разные наборы кодов, у меня остается текст, появляющийся под/над изображением, а не поверх него.

Вот пример кода, который я выполнил на SFMC.

<style>
  .container {
    height: 400px;
    width: 400px;
    position: relative;
  }
  .image {
    position: absolute;
    left: 0;
    top: 0;
  }
  .text {
    z-index: 100;
    position: absolute;
    color: white;
    font-size: 24px;
    font-weight: bold;
    left: 150px;
    top: 350px;
  }
</style>

<div class="container">
  <img class="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />
  <p class="text">
    Hello World!
  </p>
</div>

Любая помощь приветствуется!

1
Nat Fan 2 Окт 2019 в 03:45

1 ответ

Вам нужно добавить изображение в качестве фонового изображения css, если вы хотите наложить на него текст. например

<style>
.container {
    height: 400px;
    width: 400px;
    position: relative;
  }
  .image {
    position: absolute;
    left: 0;
    top: 0;
  }
  .text {
    z-index: 100;
    position: absolute;
    color: white;
    font-size: 24px;
    font-weight: bold;
    left: 150px;
    top: 350px;
  }
</style>

<div class="container" style="background-image: url('http://www.noao.edu/image_gallery/images/d4/androa.jpg');">
  <p class="text">
    Hello World!
  </p>
</div>
2
Travis Naughton 2 Окт 2019 в 09:32