Как поместить текст на картинку css

Текст поверх картинки на CSS

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

 
 
Любой текст
Абсолютно любой.
 
 

.image < position: relative; width: 100%; /* для IE 6 */ >h2 < position: absolute; top: 250px; left: 0; width: 100%; >h2 span

« Предыдущая статья

Следующая статья »

Оставить комментарий

Последние статьи

• Создания приложения на React Native: инструкция
• Webpack 5: создание базовой конфигурации
• Как сделать запись звука или голоса с микрофона
• Задания по React для прокачки
• Задания по JS для прокачки
• PrettyTags — дружелюбные теги в MODX
• Новый инструмент и компонент для MODX
• Типизация компонентов React с TypeScript
• Получение данных с сервера React Hooks
• Проверка ОГРН и ОГРНИП на TypeScript

Полезные инструменты

• Узнать ip адрес по домену сайта
• Генератор robots.txt
• Онлайн калькулятор XOR
• Компрессор HTML
• Перевод текста в верхний регистр
• Генератор Iframe
• Перевод текста в транслит
• Перевод текста в нижний регистр

© Copyright 2014-2023 Daruse
Все права защищены

Контакты автора

Присылайте свои вопросы, предложения и пожелания на электронную почту. Будем рады сотрудничеству.

E-mail: daruse93@gmail.com

Telegram: daruse93

Позиционирование текста на картинке в 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 с Нуля до Гуру»вы получите систематизированные знания о том, как делаются сайты, на простых примерах.

Создано 19.10.2018 10:22:00

Михаил Русаков

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

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

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

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

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

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

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

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

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

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

Как поместить текст на картинку css

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

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

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

Я сделал текст во рту у Вейдера. (получилось это так wild=413 padding-left=303 height=100 padding-top=250)

padding-top : 250px ;
width : 413px ;
padding-left : 303px ;
height : 100px ;
background-image : url ( «http://dml.ucoz.net/_sf/0/51237425.jpg» );
/*оформление текста*/
color : #FFF ;
font-family : Arial , Helvetica , sans-serif ;
font-size : 40px ;

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

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

< span >Я твой отец.

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

display :inline- block ;
position : relative ;
.example 2 span < display :inline- block ; position : absolute ; /* Оформление текста */ color : #FFF ; font-family : Arial , Helvetica , sans-serif ; font-size : 20px ; background-color :rgba( 0 , 0 , 0 ,. 4 ); padding : 10px 30px ;

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

Я твой отец.

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

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

Дарт Вейдер

Верховный Главнокомандующий Имперской армией, Владыка Ситх

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

Наложение текста поверх картинки CSS

Чтобы расположить один элемент сверху другого, используется свойство z-index.

Как наложить текст поверх картинки CSS? Z-Index

Это свойство CSS устанавливает порядок элементов в стеке. Оно работает только с элементами, позиционированными с помощью position как absolute, relative, fixed, sticky. Но не static.

Допустим, что экран компьютера расположен – это фон, а реальный мир – на переднем плане. Каждый элемент без указанного z-index является слоем по умолчанию.

Чтобы разместить элемент на заднем фоне, его Z-index должен быть меньше 0. Элемент с наименьшим значением будет располагаться позади. Чтобы поместить элемент поверх слоя по умолчанию, используйте положительные значения Z-index. Чем больше число, тем выше элемент будет располагаться в стеке.

Вот еще несколько особенностей использования Z-index:

• Элементы в стеке располагаются в порядке возрастания.
• По умолчанию слой имеет z-index: 0.
• Отрицательные значения z-index смещают элемент ниже слоя по умолчанию.
• Элемент с наименьшим значением z-index будет расположен глубже всех.
• Положительные значения смещают элементы выше слоя по умолчанию.
• Элемент с наибольшим значением будет расположен впереди всех.

Пример

В примере я сместила изображение назад, установив z-index в -1. При этом не нужно указывать значение z-index для текста. Потому что для слоя оно равно 0, что больше, чем -1.

Интерактивные демо-версии

Вот примеры на Codepen и repl.it, с которыми вы можете поэкспериментировать.