Как поместить текст на картинку 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 Русаков Михаил Юрьевич. Все права защищены.

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

Для того чтобы наложить текст на изображение в HTML, можно использовать CSS свойство background-image для контейнера с текстом и установить значение background-color для контейнера, чтобы текст был читаемым. Например:

 class="image-container"> Текст наложенный на изображение  

.image-container  background-image: url('path/to/image.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; height: 400px; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.5); /* Значение rgba(0,0,0,0.5) задает полупрозрачный черный цвет фона */ > h1  color: white; font-size: 3em; text-align: center; > 

В данном примере для контейнера с классом image-container устанавливается фоновое изображение с помощью свойства background-image , а также устанавливаются размер фонового изображения, его позиция и повторение. Для того чтобы текст был читаемым, установлено полупрозрачное значение цвета фона с помощью функции rgba() . Контейнер также настроен с помощью свойства display: flex для выравнивания текста по центру. Заголовок h1 имеет белый цвет и центрируется внутри контейнера.

CSS для настройки текста поверх изображений

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

Здесь будут рассмотрены различные подходы для решения этой проблемы.

Вступление

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

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

Обзор возможных решений

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

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

Решения

Наложение градиента

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

Для наложения градиента есть два способа:

1. Использовать отдельный элемент для градиента (псевдоэлемент или пустой )
2. Применить градиент, как фоновое изображение.

У каждого из этих способов есть свои плюсы и минусы, рассмотрим их.

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

.card__content < position: absolute; /* остальные стили (left, top, right и padding) */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); >

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

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

Здесь видно, что градиент по вертикали должен покрывать большее пространство, поэтому его высота должна быть увеличена. Если градиент равен размеру контента, это будет работать не во всех случаях. Чтобы решить такую проблему, можно использовать min-height , как показано ниже:

• Применить min-height к элементу .card__content .
• Использовать flexbox чтобы приладить содержимое к низу контейнера

.card__content < position: absolute; /* другие стили (left, top, right и padding) */ display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); >

Другой вариант решения – использовать большой padding-top . Он проще, т.к. тогда не понадобятся min-height и flexbox .

.card__content

В-общем, выглядит хорошо. Можно ли сделать ещё лучше? Да, безусловно!

Плавные градиенты

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

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

Для достижения градиенту эффекта плавности в CSS потребуется несколько точек-остановок, поскольку на момент написания этой статьи не было отдельного специального способа сделать это. Хорошая новость заключается в том, что рабочая группа CSS обсуждает возможность реализации смягчения в CSS-градиентах, только неясно, когда это произойдет.

Вот CSS-градиент для примера, приведенного выше:

.card__content

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

Горизонтальный градиент

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

Пример CSS-градиента для такого случая. Здесь используется упомянутая ранее техника ослабления для создания плавного градиента.

background: linear-gradient( to right, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.964) 7.4%, hsla(0, 0%, 0%, 0.918) 15.3%, hsla(0, 0%, 0%, 0.862) 23.4%, hsla(0, 0%, 0%, 0.799) 31.6%, hsla(0, 0%, 0%, 0.73) 39.9%, hsla(0, 0%, 0%, 0.655) 48.2%, hsla(0, 0%, 0%, 0.577) 56.2%, hsla(0, 0%, 0%, 0.497) 64%, hsla(0, 0%, 0%, 0.417) 71.3%, hsla(0, 0%, 0%, 0.337) 78.1%, hsla(0, 0%, 0%, 0.259) 84.2%, hsla(0, 0%, 0%, 0.186) 89.6%, hsla(0, 0%, 0%, 0.117) 94.1%, hsla(0, 0%, 0%, 0.054) 97.6%, hsla(0, 0%, 0%, 0) 100% );

Смешивание сплошного цвета и градиента

Подходит для заголовка с большим фоновым изображением, но он может скрывать какие-то детали на картинке.

Такой способ лучше применять, когда детали изображенного на картинке не имеют особой ценности, в отличие от текста над ней. Тогда подойдет такая HTML-разметка:

 
  
Unlimited movies, TV shows, and more.
 
Watch anywhere. Cancel anytime.





 
 

А CSS может быть таким:

.hero:after

Ниже наглядное объяснение, как работает такой паттерн:

Наложение градиента и текст с тенью

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

.whatever-text

Наложение градиента, тень текста и прозрачность

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

.player__icon < opacity: 0.9; >.player__time

Из нового можно заметить, что у значков и проигрывателя установлена прозрачность opacity: 0.9 и это поможет им смешаться с фоном под ними.

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

Facebook и Youtube используют в своих видеопроигрывателях примерно одинаковую технику.

Что отличает подход Youtube к выделению текста и кнопок:

• У каждого значка, чтобы он лучше выделялся, сделаны темные края.
• Для цифр длительности видео используется чёрная тень вместо белой.

Радиальный градиент

Ещё одно интересное решение – использование радиального градиента. Это работает так:

1. Надо установить базовый цвет заднего фона для контейнера.
2. Расположить изображение в верхнем правом углу, установить ему ширину 75%.
3. Наложение должно соответствовать размеру и положению изображения.

CSS здесь может быть таким:

.hero < background-color: #000; min-height: 300px; >.hero__image < position: absolute; right: 0; top: 0; width: 75%; height: 100%; object-fit: cover; >.hero:after

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

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

Этот инструмент поможет выбрать правильную прозрачность подложки в зависимости от изображения и цвета текста.

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

Тестирование

Любое решение нельзя считать хорошим, пока оно не будет проверено и протестировано. Один из способов, который можно использовать для проверки градиента подложки – добавить под ним белый фон. Если текст хорошо читается, то градиент будет работать с любым изображением, которое используете. Если нет, нужно его тщательнее настроить и улучшить.

В приведённом выше примере под заголовком выбран сплошной цвет, а коэффициент контрастности составляет 4,74 и это очень неплохо.

Использование Firefox DevTools

Firefox может выполнять проверку цветового контраста градиентов. Эту отличную особенность тоже можно использовать для оценки читаемости текста.