Уроки HTML, CSS / Как наложить текст на картинку

Привет друзья! Сегодня мы сможем с вами смотреть, как добавить текст на картинку в HTML, это бывает полезно, когда вы хотите подписать картинку прямо поверх нее - чтобы это стильно смотрелась, например. Конечно, есть много вариантов, как это сделать, можно разместить картинку в контейнере, а текст в отдельном контейнере или можно было бы поместить картинку на задний фон контейнера, а текст просто в контейнере и его выравнивать так как нам нужно, либо использовать другие варианты, и мы сейчас с вами разберем один из вариантов.
Дополнительное описание, домашние задания и многое другое можно найти на сайте WISEPLAT: wiseplat.org/
1) Урок на сайте Wiseplat:
✔ Сообщество программистов: wiseplat.org/
✔ -------------
Вступай в группу Вк - wiseplat 🚀
Группа FaceBook - / wiseplat
Инстаграм Wiseplat: / wiseplat
Instagram: / shpaginoleg
Twitter - / wiseplatschool
********************************
Если Вам понравилась публикация, подписывайтесь на канал!
Ставьте лайки, тогда будем еще писать такой контент :)
Если есть вопросы или пожелания, то пишите, в комментариях.
********************************
Уроки от #OlegShpagin 👨🏼‍💻
Все уроки по хештегу #htmlshpagin #cssshpagin

[@3t3rn4l]

ну приплыли, спасибо большое за инфу про брэкетс, буду юзать

[@Alex-2908]

автор почему-то не сказал (может не знает?), что что position: absolute; спозиционирует текст относительно body, а не относительно картинки.
то есть если над этой картинкой появится какой-то другой элемент - текст уплывет, так как он не привязан к этой картинке (то, что он внутри контейнера - не удержит его на его месте). нужно на вмещающий контейнер повесить position: relative (или в 2019 было по-другому?))

[@humoyunruhiddinov4832]

чел харооош

[@ЕкатеринаМакаренкова-р8щ]

Как сделать адаптируемую картинку и внутри текст тоже адаптируемый и при этом сохраняющий позицию в картинке

[@nikeltw]

Спасибо вы мне не помогли информация устарела position больше нет!

[@denismaltcev3356]

Отдельное спасибо за ctr + alt + b в плагине )

[@karinaS]

Спасибо огромное .Легкое и простое объяснение. Обязательно подписка!!!

[@MaRoL_view]

Спасибо, помог!

[@wiseplat]

Привет! Делись с друзьями каналом 😀👍

[@компьютердляначинающих-м4ф]

сильно помог, спасибо!

[@Crynixx_Editz]

спасибо помог-же ты

[@BoT_34m1]

ляяяяяяяяяя спппасибо, очень помог

[@iljabogdanovs1593]

Привет, а в html без использования CSS это можно делать?

[@VsevelikijChuriman]

Большие пасибулики.

[@valvetigu5207]

Ситуация. У меня кратинка, поверх которой текст. Но есть еще выпадающее меню, которое выпадая прячется за картинкой/ текстом. Как исправить?

[@Paleolog_Alex]

Здравствуйте, подскажите пожалуйста: на моем сайте после подписки пользователь должен по задумке в рассылке получать удостоверение пользователя, а для этого мне нужно на определенный шаблон (картинку) наложить некие поля с кодом куда бы подтягивались данные об этом пользователе фамилия и т д. Каким образом изготовить такие поля на бланке удостоверения, в каком формате должна быть такая картинка? И какой код должен быть вписан в такие поля ? Хотя бы дайте направление где об этом получить информацию?

[@soup8094]

А как сделать,чтобы можно было вот так в ряд выставить текст на картинке? Я хочу сделать переходы по страницам.

[@_brightgirl_6065]

спасибо!!!

[@MadSplit]

Cпасибо!

[@Aisponch]

в итоге нижние блоки будут упирается в текст а не в картинку

[@BoT_34m1]

[@ИльяКазинцев]

А если к примеру картинка будет увеличиваться или становиться меньше, то абсолютное позиционирование не будет вылезать?

[@rozelia_777]

Будет. К сожалению, у меня все вылезает :(

[@lumeaceaiuluisrl6343]

Спасибо!

[@perstj5746]

У меня не получается контрл Алт б почему

[@sisofodh]

Гений

[@glimmer5103]

Здравствуйте. Сделайте видео как сайт сделать на нескольких языках.

[@wiseplat]

Привет! Можно сделать так th-cam.com/video/FL1AnF_HdIg/w-d-xo.html
А можно сделать отдельную структуру для этого и перевод брать из базы и отображать его в зависимости от языка пользователя.

[@chelepunka]

А не проще в фотошопе сделать такую картинку,какую вам надо и вставить её потом в коде?

[@wiseplat]

Привет:) Конечно проще, но нужно было именно так - для SEO - чтобы текст со страницы считывал робот.
Что учишь сейчас?

[@chelepunka]

@@wiseplat понятно) учу сейчас питон параллельно с С++,как бы странно это не звучало)

[@wiseplat]

@@chelepunka Так правильно, посмотри на чем написан Python :) Напиши ответ сюда :)

[@chelepunka]

@@wiseplat на С

[@raf_18]

А эта комбинация работает в Visual Studio?

[@davidsuraganlive]

спасибо помогли

[@dmitruz1900]

можно как то в css сделать текст справа от картинки?

[@d.dorant2406]

через флексбокс

[@_Fantom_.]

Вообще-то правильнее было бы выровнять текст с помощью top и left..

[@jackpeterson541]

а разве текст позиционировать абсолютно нормально ?

[@alexanderpadalka5708]

✔

[@bobojongiyoev8797]

Прикин чо нашол возможно фотошоп и воля
Если ето будет ссылка то другое дело

[@youtude.8950]

Не проще надпись в фотошопе наложить.

[@metavers_player]

спасибо помог