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

Рет қаралды 33,807

Exploring the IT World / Oleg Shpagin / WISEPLAT

Күн бұрын

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

Пікірлер: 42

@user-hg6cd2gz6v Жыл бұрын

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

@Alex-2908 Жыл бұрын

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

@user-oj9bw8mv1u 3 жыл бұрын

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

@karinaS 2 жыл бұрын

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

@MaRoL_view 4 жыл бұрын

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

@wiseplat 4 жыл бұрын

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

@denismaltcev3356 4 жыл бұрын

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

@humoyunruhiddinov4832 Жыл бұрын

чел харооош

@3t3rn4l 2 жыл бұрын

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

@_brightgirl_6065 4 жыл бұрын

спасибо!!!

@Paleolog_Alex 2 жыл бұрын

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

@lumeaceaiuluisrl6343 3 жыл бұрын

Спасибо!

@iljabogdanovs1593 3 жыл бұрын

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

@MadSplit 3 жыл бұрын

Cпасибо!

@BoT_34m1 6 ай бұрын

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

@davidsuraganlive 3 жыл бұрын

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

@soup8094 4 жыл бұрын

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

@metavers_player 2 жыл бұрын

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

@VsevelikijChuriman 2 жыл бұрын

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

@valvetigu5207 3 жыл бұрын

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

@user-pl3ot8vo8u 4 жыл бұрын

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

@rozelia_777 Жыл бұрын

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

@sisofodh 2 жыл бұрын

Гений

@perstj5746 2 жыл бұрын

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

@glimmer5103 3 жыл бұрын

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

@wiseplat 3 жыл бұрын

Привет! Можно сделать так kzfaq.info/get/bejne/fLJhdNF3xK7IeZs.html А можно сделать отдельную структуру для этого и перевод брать из базы и отображать его в зависимости от языка пользователя.