Подписи к картинке в html
191
02 апреля 2018, 21:56
Как реализовать такие подписи к картинке?
Исходная картинка
Исходный html
<div>
<figure>
<p><img src="https://i.stack.imgur.com/WBbdw.jpg"/></p>
<figcaption>Посмотрите как прекрасен мир без VR- очков</figcaption>
</figure>
</div>Answer 1
Как вариант, можно использовать position: absolute. Также, тег p был удален, так как он не предназначен для размещения изображений.
.image-wrapper {
position: relative;
}
.image-wrapper img {
position: relative;
width: 100%;
}
.image-caption {
position: absolute;
background-color: #ff000075;
bottom: 4px;
width: 100%;
}<div>
<figure class="image-wrapper">
<img src="https://mtdata.ru/u28/photo96CE/20466331848-0/original.jpg" />
<figcaption class="image-caption">Посмотрите как прекрасен мир без VR- очков</figcaption>
</figure>
</div>
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47935 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30568 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23914 visits
- Как через css изменить цвет png изображения? 10407 visits
- Blob video url download 10006 visits
- Php curl запрос через прокси с авторизацией 9281 visits
- Работа с captcha vk api 8149 visits
© "hostciti.net" 31.3.2025 | 20:41