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

Привет друзья! Сегодня мы сможем с вами смотреть, как добавить текст на картинку в HTML, это бывает полезно, когда вы хотите подписать картинку прямо поверх нее - чтобы это стильно смотрелась, например. Конечно, есть много вариантов, как это сделать, можно разместить картинку в контейнере, а текст в отдельном контейнере или можно было бы поместить картинку на задний фон контейнера, а текст просто в контейнере и его выравнивать так как нам нужно, либо использовать другие варианты, и мы сейчас с вами разберем один из вариантов.

1) Урок на сайте Wiseplat:

✔ -------------

********************************
Если Вам понравилась публикация, подписывайтесь на канал!

Ставьте лайки, тогда будем еще писать такой контент :)

Если есть вопросы или пожелания, то пишите, в комментариях.
********************************
- Уроки от #OlegShpagin 👨🏼‍💻
- Все уроки по хештегу #htmlshpagin #cssshpagin

[trnl]

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

[Alex-]

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

[karinaS]

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

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

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

[denismaltcev]

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

[iljabogdanovs]

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

[nikeltw]

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

[Paleolog_Alex]

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

[valvetigu]

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

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

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

[soup]

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

[perstj]

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

[dmitruz]

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

[glimmer]

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

[Aisponch]

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

[chelepunka]

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

[bobojongiyoev]

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

[jackpeterson]

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

[_Fantom_.]

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