Как сделать - Текст на изображении
Узнать, как разместить текст поверх изображения.
Текст на изображении
Внизу слева
Вверху слева
Вверху справа
Внизу справа
По центру
Создать текст на изображении
Шаг 1) Добавить HTML:
Пример
<div class="container">
<img src="img_snow_wide.jpg" alt="Снег" 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">Centered</div>
</div>
Шаг 2) Добавить 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%);
}
Редактор кода »Чтобы узнать больше о том, как стилизовать изображения, прочитайте наш учебник CSS Изображения.
Чтобы узнать больше о позиционировании CSS, прочитайте наш учебник CSS Позиция.