Как сделать картинку над картинкой

Как сделать картинку над картинкой

Я часто вижу в комментариях к урокам или на форумах, когда новички спрашивают: "Я хочу разместить текст поверх картинки, а он оказывается под или над картинкой. Помогите." Давайте рассмотрим на конкретном примере, как написать текст на картинке в любом месте.

Нам надо рядом с каждым овощем, на иллюстрации ниже, подписать его название. Задача вроде бы простая, но поверьте, может свести с ума любого начинающего веб-мастера.

Я умышленно для примера взял большую картинку 1280×733, чтобы заодно показать, как её адаптировать под разные разрешения экранов. Уже прошли те времена, когда достаточно было научиться верстать только под десктопные разрешения. Делая верстку, следует сразу позаботиться об адаптивности.

HTML-разметка

Первым делом создаем контейнер для овощной картинки и для надписей. Обратите внимание, что каждую надпись мы помещаем в отдельный блок с разными классами. И это логично, поскольку все надписи будут иметь свои координаты на странице, а мы будем управлять ими, прописывая свойства в дивах.

После сделанной HTML-разметке, мы видим только фрагмент картинки и текст, оказавшийся под картинкой. Знакомая картина, не правда ли?

Картинка разъехалась на все свои немаленькие пиксели и появилась горизонтальная полоса прокрутки, но к счастью это легко исправить, задав ширину картинке 100%, тем самым сделав её адаптивной. Хотя бы одну проблему решили.

Теперь займемся текстом.

CSS-стили

В стилях контейнера, ключевым будет свойство position: relative. Этим мы меняем правила и просим вести отсчет координат не от верхнего левого угла окна браузера, а от угла контейнера, который является родителем для всех вложенных в него элементов и занимает 90% окна.

.container <
width: 90%;
position: relative;
text-align: center;
color: #000;
font-family: arial black;
font-size: 250%;
>

Дальше будем позиционировать надписи, просто подбирая в системе X/Y нужные координаты, делать подбор удобно в Chrome / Инструменты разработчика, копируя и вставляя код в файл со стилями.

.left <
position: absolute;
top: 26%;
left: 6%;
>

Читайте также:  Компьютер не видит жесткий диск с ноутбука

.center <
position: absolute;
top: 17%;
left: 42%;
>

.right <
position: absolute;
top: 1%;
right: 27%;
>

Мы задали координаты не в пикселях, а в % не случайно, при уменьшении размеров экрана, тогда текст будет оставаться там же, где мы его закрепили. Это хорошая новость, а плохая это то, что размер текста не уменьшается вместе с картинкой. Картинка сама уменьшается, а текст надо уменьшать принудительно.

Медиа-запросы

На разрешении равным или меньше 768 пикселей, уменьшить размер шрифта до 150%. Откуда мы узнали, что надо уменьшать именно на 768 пикселях? Через инспектор кода, мы увидели, на какой отметке текст наскакивает на соседние элементы.

@media screen and (max-width: 768px) <
.container <
font-size: 150%;
>
>

Одного запроса оказалось недостаточно, уменьшили размер текста и на 470 пикселях.

@media screen and (max-width: 470px) <
.container <
font-size: 90%;
>
>

Конечный результат

Посмотрите на реальной странице, как прекрасно смотрится текст на картинке на разных разрешениях.

Демонстрация.

Из данного видео-курса "HTML5 и CSS3 с Нуля до Гуру"вы получите систематизированные знания о том, как делаются сайты, на простых примерах.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Читайте также:  Как сделать фото меньше размером на телефоне

    Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Онлайн-сервис для создания изображений с текстом. Просто выберите своё изображение (кнопка "Закачать изображение"), задайте тип, размеры, цвет шрифта, прозрачность и цвет подложки и введите фразу или цитату. После нажания кнопки "Сохранить" готовое изображение с текстом будет сгенерировано в вашем браузере и может быть скачано, либо отправлено на наш сайт для публикации.
    Также попробуйте наш онлайн-сервис для создания мотиваторов.

    Прежде, чем ответить на вопрос « как вставить картинку в HTML? », следует отметить, что перегружать веб-страницы огромным количеством графического материала не стоит, поскольку это не только улучшит визуальное восприятие ресурса пользователем, но и увеличит время загрузки страницы.

    При создании веб-сайтов чаще всего используют графические форматы PNG , GIF и JPEG , а для дизайнерских работ с изображениями — графический редактор Adobe Photoshop , обладающий богатыми возможностями для сжатия и изменения размера изображений без потери качества, что является невероятно важным для веб-разработки.

    Как вставить изображение в HTML?

    Для того чтобы вставить изображение на HTML-страницу, используется одиночный простой тег:

    где xxx — адрес изображения. В том случае, если картинка находится в одной директории со страницей, тег будет выглядеть как:

    Однако скоростной и стабильный интернет добрался ещё не во все уголки земного шара, и бывает так, что изображение на веб-сайте попросту не загружается. Для таких случаев существует понятие альтернативного текста.

    Он показывается на месте картинки в момент его недоступности, загрузки или в режиме работы браузера « без картинок ». Добавляется он с помощью атрибута alt тега .

    Пример добавления альтернативного текста к графическому файлу:

    Назначение размеров картинки в HTML

    Для того чтобы изменить размеры отображения графического файла, используют теги height и width , где height — высота, а width — ширина, измеряемые в пикселях.

    Читайте также:  Hitman absolution минимальные системные требования

    При использовании данных атрибутов браузер сначала выделяет место для графического контента, подготавливает общий макет страницы, отображает текст, после чего загружает саму картинку.

    Рисунок помещается в прямоугольник с заданными размерами, а в том случае, если параметры меньше или больше исходных, картинка растягивается или сжимается.

    Если атрибуты height и width не используются, браузер загружает изображение сразу, задерживая отображение текста и прочих элементов страницы.

    Данные параметры можно указать как в пикселях (размер картинки постоянен и не зависит от разрешения экрана пользователя), так и в процентах (размер картинки зависит от разрешения экрана).

    Следует помнить, что в тот момент, когда вы изменяете исходный размер изображения, необходимо сохранять его пропорции.

    Для этого достаточно указать значение только одного из параметров ( ширины или высоты ), а значение второго браузер вычислит в автоматическом режиме.

    Расположение картинки в HTML

    Как и ко многим тегам HTML, к применим атрибут align , который выполняет выравнивание изображения:

    Картинка-ссылка

    В HTML для создания ссылки используется тег :

    Для того чтобы задать графическую ссылку, необходимо всего лишь объединить тег изображения с тегом ссылки.

    Делается это следующим образом:

    Как видите, графическая вставка может быть ссылкой и при клике переадресовывать на любой адрес, записанный в полном или сокращённом варианте.

    Как можно сделать картинку фоном в HTML?

    Изображение можно не только вставлять на страницу в качестве видимого объекта, но и сделать фоновым. Для определения картинки как фона необходимо в теге прописать атрибут background=”xxx” , где xxx — адрес картинки, указанный таким же способом, как в примерах выше.

    Для примера зададим такую текстурную картинку в роли фоновой:


    Сохраните изображение в папке с заготовленной заранее страницей и пропишите следующие строки:


    Фоновая картинка на странице задана.

    На этом информация о тегах и атрибутах, необходимых для вставки изображения на HTML страницу сайта, исчерпана.

    Ссылка на основную публикацию
    Как сбросить графический ключ на xiaomi
    Что такое графический пароль? Графический пароль – аналог обычного пароля, который был создан для удобства ввода на мобильных телефонах с...
    Как разблокировать айфон зная apple id
    Пользователи популярных смартфонов от Apple часто ставят на гаджет пароль, чтобы повысить безопасность мобильного устройства и избежать неприятностей – кражи,...
    Как разблокировать домофон если отключили
    Домофон — вещь нужная и полезная. Установленная в подъезде система отлично защищает жилище обывателей от проникновения посторонних людей. Второе преимущество...
    Как сбросить защитный код на нокиа
    Секретные коды Nokia для сброса, проверки и настроек. На этой странице собраны все полезные секретные и не секретные коды для...
    Adblock detector