Коротко: текст под картинкой делают несколькими способами: разметкой figure + figcaption (правильно и семантично), просто картинкой и абзацем внутри карточки, или flex-колонкой. Если текст должен быть поверх изображения — используют абсолютное позиционирование и градиент.
Два сценария
| Сценарий | Подход |
|---|---|
| Подпись под картинкой | figure + figcaption |
| Текст поверх картинки | absolute + градиент |
| Карточка: фото сверху, текст снизу | обычный поток (block + block) |
Вкладки: примеры
<figure class="pic">
<img src="photo.jpg" alt="Описание">
<figcaption>Подпись под фото</figcaption>
</figure>.pic { margin: 0; }
.pic img { display: block; width: 100%; }
.pic figcaption {
font-size: 14px;
color: #757575;
margin-top: 8px;
}Самый корректный вариант: figcaption семантически связан с картинкой и правильно читается скринридерами.
.card img { display: block; width: 100%; }
.card__body { padding: 16px; }В карточке картинка идёт блочным элементом, текст — в отдельном блоке с отступами. Никаких хаков: элементы просто стоят друг под другом.
.overlay { position: relative; }
.overlay img { display: block; width: 100%; }
.overlay__text {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 16px;
color: #fff;
background: linear-gradient(0deg, rgba(0,0,0,.7), transparent);
}Если нужен текст поверх изображения — обязательно добавьте тёмный градиент, иначе текст «потеряется» на светлом фото.
.tile {
display: flex;
flex-direction: column;
gap: 12px;
}Flex-колонка удобна, когда нужно управлять порядком и промежутками. gap избавляет от «ручных» отступов.
alt у картинки обязателен: он помогает, если изображение не загрузилось, и нужен для доступности и SEO. Если картинка декоративная — alt="".Практика: подпись под фото
- Оберните картинку в
figure. - Добавьте
figcaptionс подписью. - Сделайте картинку блочной (
display: block). - Задайте отступ между фото и подписью.
- Оформите подпись мелким шрифтом и серым цветом.
- Проверьте перенос длинных подписей.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Под картинкой «щель» | строчный img |
display: block |
| Текст поверх фото не читается | нет затемнения | градиент/подложка |
| Подпись «разъехалась» | нет обёртки | figure/flex-колонка |
| Картинка искажена | задана только одна сторона | height: auto |
Проверьте себя
Вопросы и ответы
Обёртке — position: relative, тексту — position: absolute с нужной стороной и тёмным градиентом для читаемости.
text-align: center у figcaption или у обёртки.
Краткое описание того, что изображено и зачем. Не «картинка1.jpg», а «Кухня после ремонта в стиле минимализм».
Да: оберните figure в a или сделайте ссылкой саму подпись — так карточки-ссылки работают целиком.
Итоги
- Подпись под фото —
figure+figcaption. - Картинке задавайте
display: blockиheight: auto. - Текст поверх изображения — absolute + градиент.
- Всегда заполняйте
alt.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.