Как написать текст на картинке, с помощью CSS + html?

Пожалуй это еще один важный момент в создании сайта. Некоторые сайты и вебмастера предлагают для того, чтобы написать текст на картинке огромны скрипты с кучей ненужных блоков.
На самом деле, написать текст на изображении очень легко и просто. Код занимает лишь две строки. Подобным образом текст можно разместить и на простом div-блоке

У вас должно получиться так:

снизу слева

сверху слева

сверху справа

снизу справа

текст по середине

код html



 <div class="container">

  <img src="imgdf/story/chg.jpg" alt="Snow" style="width:100%;">

  <div class="bottom-left">снизу слева</div>

  <div class="top-left">сверху слева</div>

  <div class="top-right">сверху справа</div>

  <div class="bottom-right">снизу справа</div>

  <div class="centered">текст по центру</div>

</div>

и сам код на css.



 /* блок с текстом и картинкой*/

.container {

  position: relative;

  text-align: center;

  color: white;

}



/* текст снизу слева */

.bottom-left {

  position: absolute;

  bottom: 8px;

  left: 16px;

}



/* текст сверху, слева*/

.top-left {

  position: absolute;

  top: 8px;

  left: 16px;

}



/* текст справа сверху */

.top-right {

  position: absolute;

  top: 8px;

  right: 16px;

}



/* текст снизу справа */

.bottom-right {

  position: absolute;

  bottom: 8px;

  right: 16px;

}



/* текст по середине */

.centered {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

Как видите, в примере использован код для 5 разных положений текста. Можете скопировать нужное для себя и удалить весь ненужный код. CONTAINER - это обязательный класс, без которого ничего не будет работать.