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

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

Это окончательный результат: Создать текст внутри изображения

Следующий код ниже - это созданный МЕНЬШЕ кода:

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>

И это желаемое ожидание: Создать текст внутри изображения

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
257
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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

.container {
  position: relative;
}

@MirukuSheki разместите ссылку jsfiddle, чтобы помочь вам лучше

Miguel Mota 17.12.2018 05:42

Я попытался опубликовать его в jsfiddle, но не могу загрузить изображения

Ryuujo 17.12.2018 05:47

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

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

.container{position:relative;}

если у вас есть сомнения, дайте мне знать.

Я уже использую позиционирование CSS, и он, наконец, сработал с дальнейшим объяснением моего ответа

Ryuujo 17.12.2018 06:00
Ответ принят как подходящий

Я получил окончательный ответ. Мой код был правильным, но, сделав еще один шаг, мне просто нужно больше позиционирования в стиле leftrighttop и 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;
       }
}

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

Другие вопросы по теме