Создать текст внутри изображения

Question

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

Это окончательный результат:

Ниже приведен код LESS, который был создан:

body {
  background: url("../img/background-blur-5px.jpg") no-repeat top right fixed;
  .container{
    position: relative;
    .img-bg {
      margin: auto auto;
      display: block;
      width: 70%;
      position: relative;
      @media screen and (max-width: 768px){
        display: none;
      }
    }
    .login-box{
      position: absolute;
      text-align: center;
      @media screen and (max-width: 768px){
        background: white;
        width: 90%;
        height: 30em;
        margin: 2em 0;
        padding: 1em;
      }
    }
  }
}

Это HTML-код, который был создан:

<div class="container">
  <img src="{{url('image/sbopays')}}/login-box.png" class="img-bg">
  <div class="login-box">
    Hello World
  </div>
</div>

И это ожидаемое ожидание:

Что я забыл, чтобы добавить его позже?

Answer 1

Позиционирование CSS будет правильным решением для ваших ожиданий. Согласно правилу позиции, родительский контейнер должен иметь position: относительное , а дочерний тег должен иметь position:absolute .

Теперь вы применили относительный тег изображения вместо тега div.пожалуйста, проверьте эту ссылку, чтобы узнать о методе позиционирования CSS. Ссылка

.container{position:relative;}

Если у вас есть какие-либо сомнения, пожалуйста, дайте мне знать.

Answer 2

Я получил окончательный ответ.Мой код был верным, но на шаг вперед, мне просто нужно больше позиционирования в стилях left right top и bottom:

.login-box{
   position: absolute;
   top: 3em;
   left: 54%;
   right: 20%;
   text-align: left;
   @media screen and (max-width: 768px){
       background: white;
       position: relative;
       top: 0;
       left: 0;
       width: 90%;
       height: 30em;
       margin: 2em 0;
       padding: 1em;
       }
}

Окончательный результат:

Answer 3

Положение контейнера должно быть относительным, если содержимое внутри является абсолютным:

.container {
  position: relative;
}