0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как наложить текст на картинку html

Текст поверх изображения. HTML + CSS

Каждый день на форумах html новички спрашивают: «Как разместить текст поверх изображения?». Некоторые находят неправильный выход: они рисуют текст на картинке в графических редакторах, после чего размещают изображение с текстом в html документах. Но что делать, если текст надо заменить? Опять перерисовывать картинку? Есть более простые решения.

Используя методы, описанные в уроке, мы можем получить такой результат:

Подготовка

Её размер — 350px × 200px. И этой информации достаточно для того, чтобы приступить к работе.
Теперь попробуем разместить поверх неё текст несколькими способами.

Способ первый: картинка как фон div

Сразу оговорюсь, что этот способ мне самому не нравится из-за примитивного конечного результата, но тем не менее он существует, поэтому я расскажу о нём.

Суть способа заключается в том, что мы берём тег div, задаём ему размеры, совпадающие с размером изображения, и устанавливаем картинку в качестве фона.
Обратите внимание, что размер тега = собственный размер + размер отступов padding. Таким образом, если мы хотим сделать отступ содержимого от края картинки на 20px, то размер самого div нужно указать на эти 20px меньше. То есть: 350-20 = 330 в ширину и 200-20 = 180 в высоту.

[code lang=»css»].example1 <
padding-top:20px;
width:330px;
padding-left:20px;
height:180px;
background-image:url(«/examples/20120821/bg.png»);

/*оформление текста*/
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:40px;
>[/code]

Способ простой по структуре хтмл кода (требуется всего один тег), но зато он не позволяет задать тексту какие-то особые стили. В результате чего может получиться так, что текст будет сложно прочитать. Кроме того, блок жёстко привязан к размерам картинки, а значит, в случае изменения картинки придётся переписывать и css

Способ второй: наложение двух тегов друг на друга

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

[code lang=»css»].example2 <
display:inline-block;
position:relative;

>
.example2 span <
display:inline-block;
position:absolute;
top:30px;
left:0px;

/* Оформление текста */
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;

/* Фон */
background-color:rgba(0,0,0,.4);
padding:10px 30px;
>[/code]

.example2:
display:inline-block нам нужен, чтобы контейнер не растягивался по ширине на всю страницу.
position:relative заставляет все вложенные блоки с position:absolute вести отсчёт координат своего положения не от окна браузера, а от блока .example2.

.example2 span:
display:inline-block — для того, чтобы стили, относящиеся к блочным элементам, могли быть применены к нашему тексту.
position:absolute — для вынимания тега из общего потока и дальнейшего его размещения с помощью задачи конкретных координат. top, left — отступы сверху и слева (координаты). возможно вместо них использовать bottom (снизу) и right (справа)

Читать еще:  Мильгамма уколы инструкция

Минусом этого способа является то, что нарушается семантика кода, появляется много лишних тегов. Но зато он не привязан к размерам картинки, он позволяет делать фон у текста, делая его более читаемым, да и вообще даёт нам полную свободу в настройке стилей.

Играя с css и структурой тегов можно добиться и такого результата:

Данный результат довольно неплохо подходит для оформления галлерей, витрин интернет-магазинов и прочих сервисов.

Код последнего результата:

Я — заголовок

А я — комментарий к этой прекрасной картинке. Я такой длинный, что занимаю несколько строчек.

[code lang=»css»].example3 <
display:inline-block;
position:relative;
>
.example3 .example_text <
display:block;
position:absolute;
left:0;
bottom:0;
width:100%;
box-sizing:border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

>
.example3 h6 <
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
>
.example3 span <
font-size:12px;
>[/code]

Позиционирование текста на картинке в CSS

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

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

Я умышленно для примера взял большую картинку 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

    Пишем текст поверх изображения

    Вообще, сам вопрос несложен. Нет ничего хитрого, чтобы расположить один блок, поверх другого. Но всё-таки, есть и в этом вопросе несколько моментов, достойных обсуждения. Я думаю найдутся люди, кому это будет интересно.

    Идея состоит в том, чтобы просто накладывать некоторый текст на изображение. Текст представлен в виде блоков переменной длины, предполагается что он будет расположен с левой стороны, с ровной заливкой вокруг текста. Например, как на этом изображении:

    Схема документа

    HTML-разметка

    Конечно, было бы легче использовать div-элемент для вывода изображения в качестве фонового рисунка, но в данном случае я предполагаю, что изображение — это контент документа, и, следовательно, оно принадлежит HTML. Элемент div будем использовать в качестве контейнера для абсолютного позиционирования текста в нём.

    Таким образом, мы разместили текст непосредственно поверх изображения. Следующая наша задача сделать фон для текста. Поскольку элемент

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

    Будем использовать этот span для оформления текста и фона:

    Проблемы

    Как видно из рисунка, в конце строки блок текста заканчивается непосредственно после последнего символа в строке, и начинается сразу же по левому краю на следующей строке. Свойство padding для span-а, в данном случае, нам не поможет.

    Чтобы решить проблему, необходимо использовать дополнительные span-ы по обе стороны от тега
    , в этом случае мы уже сможем воспользоваться padding-ом.

    Этим новым span-ам мы зададим свойство padding:

    Что на счёт семантики?

    На данном этапе дизайн завершен, но при этом осталась одна проблема. А именно, огромное количество дополнительных элементов HTML добавленных только для дизайна. Я имею в виду span-ы. Чтобы решить эту проблему, воспользуемся jQuery. Для этого удалим все span-ы в разметке, и динамически добавим их:

    Источники:

    http://borpost.ru/html/tekst-poverx-izobrazheniya-html-css/
    http://myrusakov.ru/css-image-text.html
    http://www.css-tricks.ru/articles/js/text-blocks-over-image

    Ссылка на основную публикацию
    Статьи c упоминанием слов:

    Adblock
    detector