На самом деле, написать текст на изображении очень легко и просто. Код занимает лишь две строки. Подобным образом текст можно разместить и на простом 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 - это обязательный класс, без которого ничего не будет работать.
.png)
.jpg)
