Поместить текст в картинку HTML/CSS
Всем привет! Начал потихоньку разбираться с HTML и CSS сразу подкатила небольшая работка. Так как я только учусь всех нюансов не знаю. Имеется меню в котором текст должен быть написан на звездочках, звездочки(они разного цвета) являются картинками и требуется поместить ссылку в них. Уже пытался это сделать с помощью position: relative и absolute. Выравнивал текст по первой ссылке и получалось так, что 1 ссылка становилась ровно в центр, а остальные 4 съезжали влево с помощью padding исправить это не удавалось, так как кол-во букв разное и все равно в какую-то сторону ссылки съезжали. Кусочек кода HTML:
Здесь картинки одинаковые, так как 5 с разными цветами прикладывать я думаю не имеет смысла. CSS:
nav < float: right; >nav li < float: left; display: block; position: relative; >nav img < height: 150px; width: 150px; >nav li a
Может это у меня руки не из того места растут, но вроде я делаю все правильно. Возможно это можно выровнять через child, но я уверен есть более простой способ. Картинка:
У меня получается вот такая вот фигня: 
P.S. каждая ссылка должна быть в центре звезды.
Добавление текста на фото онлайн бесплатно
Добавляйте текст, надпись или цитаты к Вашим фото за считанные секунды, используя текстовый онлайн-редактор Fotor.
Стильные шрифты, предварительно установленные текстовые наложения, расширенное форматирование и параметры эффектов текста – все это у Вас под рукой.
Загрузите изображение и попробуйте сами. Быстро, просто и бесплатно.
Простой в использовании текстовый редактор с элегантными шрифтами
Текстовый редактор Fotor предоставляет обширную библиотеку высококачественных стилей шрифтов на выбор, включая жирный шрифт, курсив, каллиграфию, рукописный ввод, скрипт и многое другое. Легко находите шрифты, соответствующие эстетике и теме Ваших фотографий. Мы также постоянно добавляем новые шрифты, поэтому у Вас никогда не закончатся красивые шрифты для работы.
Изменение размера текста, цвета, интервалов, выравнивание и многое другое
Мы предлагаем для Вас бесконечное множество настраиваемых параметров, чтобы разнообразить Ваш текст. Экспериментируйте с различными цветами текста, меняйте прозрачность текста, вращайте текст по вертикали или горизонтали, добавляйте эффект контура/тени, регулируйте расстояние между буквами и высоту строк и многое другое. Получите полный творческий контроль над Вашим текстом.
Сделайте Подпись на фото как профессионал
Добавление надписи на фото – самая популярная вещь в социальных сетях! Хотите ли Вы добавить вдохновляющую цитату или просто несколько строк с информацией о настроении, которым Вы хотите поделиться, Fotor Вам поможет! Кроме добавления надписи, есть встроенный клипарт, который можно применять, чтобы оживить Ваши фото еще больше. Добавьте Вашим снимкам мощных визуальных эффектов и будьте в центре внимания в Instagram, Facebook и других социальных сетях.
Выделите Ваш текст с помощью комбинаций шрифтов
Нет ни малейшего представления о том, как сочетать шрифты и выравнивать текст? Вам и не нужно. Текстовый редактор фотографий Fotor избавил Вас от затруднений, собрав множество заранее установленных комбинаций шрифтов и макетов. Просто перетащите понравившуюся комбинацию шрифтов на изображения, добавьте текст и готово. Выглядите, как профессионал, экономя время!
Формат
Форматирование текста на фото или дизайне может действительно придать им эстетичности и симметричности. При добавлении текста к изображениям, фото или шаблонам не забудьте учесть размер. Большой размер текста аудитория подсознательно воспринимает как более важный. Для текста меньшего размера верно противоположное.
Цвет
Цвет отражает чувства и идеи, поэтому он чрезвычайно важен для успешного дизайна, фото или коллажа. Контрастность и соответствие производят разные эффекты, поэтому экспериментируйте и находите то, что подходит именно Вам. Добавляйте разные цвета к тексту и завершите историю в Вашем визуальном творчестве.
Прозрачность
Будет ли Ваш текст выделен жирным шрифтом или будет скрыт на заднем плане? Меняйте прозрачность текста для достижения идеальных результатов, чтобы изображение и буквы сочетались друг с другом естественным образом. Опять же, навыки Photoshop не требуется.
Как добавить текст на фотографию?
- Нажмите кнопку «Добавить текст на фотографию» для перехода на страницу редактирования.
- Нажмите «Открыть изображение» для загрузки изображения, к которому необходимо добавить текст.
- Просмотрите типы и шрифты, скользя вниз.
- Нажмите на тот, который Вам нравится, или перетащите его прямо на Ваше изображение.
- Измените текст, цвет, размер, фон или прозрачность.
- Нажмите кнопку «Скачать» для сохранения фото в удобном для Вас формате.
Часто задаваемые вопросы
Fotor не просто предоставляет лучший опыт работы с фотографией и текстом.
Обрезка изображений
Нужно обрезать фотографию, чтобы она соответствовала размеру изображения Вашего профиля в социальной сети? Бесплатная онлайн-обрезка изображений Fotor поможет Вам легко обрезать и менять размер любого изображения до необходимого Вам размера! Просто загрузите фотографию, выберите нужные Вам размеры, и Вы получите идеально обрезанное изображение за считанные секунды.
Фоторамки
Нужно ли Вам простое белое обрамление или художественная рамка, чтобы украсить Ваши фото, Fotor Вам поможет. Выбирайте из широкого спектра заранее установленных обрамлений и рамок, и Вы обязательно подберете для Ваших фотографий идеальный вариант. Просто перетащите фото в рамки, и Fotor подгонит их автоматически. Это быстро и просто.
Фотоэффекты
Сотни удивительных фотоэффектов, предоставляемых Fotor, помогут Вам в создании интересных изображений. От черно-белых эффектов, подчеркивающих текстуры на изображении, до винтажных эффектов, которые подчеркнут ценность времени. Вне зависимости от того, какие виды фотоэффектов Вам нравятся, Fotor станет Вашим идеальным выбором для ретуширования фотографий одним нажатием.
Средство для создания коллажей
Fotor предлагает тысячи заранее установленных макетов и шаблонов коллажей, от простых фотосеток до модных фотоколлажей в Instagram, включающих в себя почти любой стиль. Просто выберите тот, который Вам понравится больше всего, и вставьте Ваши фото. За считанные минуты Вы получите потрясающий фотоколлаж! Превратите Ваши повседневные моменты в прекрасное, нестареющее визуальное искусство с помощью Fotor прямо сейчас!
HDR
Инструмент HDR от Fotor применяет передовую технологию HDR (расширенный динамический диапазон) для сохранения деталей, которые могут быть утеряны при использовании стандартных цифровых камер, и воспроизведения самых ярких цветов, которые видели Ваши глаза. Просто загрузите три или более фотографий одной и той же сцены с различными экспозициями, и Fotor начнет автоматически анализировать их, объединяя в насыщенное изображение HDR.
Ретушь фотографий
Инструменты Fotor для ретуширования фотографий упрощают редактирование селфи или портретных фотографий. С помощью всего нескольких нажатий Вы сможете удалить пятна, разгладить кожу, устранить покраснения с глаз, отбелить зубы и даже сделать цифровое преображение Вашей фото! Это быстро и просто, не требуется никаких дизайнерских навыков! Выглядите на все сто вместе с Fotor!
Быстрый и простой способ добавления текста на фотографию онлайн
Добавление текста к изображениям еще никогда не было проще, как с текстовым редактором фотографий Fotor! Используя различные шрифты как в режиме онлайн, так и офлайн, Вы можете еще больше менять текст на фото с помощью расширенных текстовых функций и эффектов!
Как на картинке написать текст css
Я часто вижу в комментариях к урокам или на форумах, когда новички спрашивают: «Я хочу разместить текст поверх картинки, а он оказывается под или над картинкой. Помогите.» Давайте рассмотрим на конкретном примере, как написать текст на картинке в любом месте.
Нам надо рядом с каждым овощем, на иллюстрации ниже, подписать его название. Задача вроде бы простая, но поверьте, может свести с ума любого начинающего веб-мастера.
Я умышленно для примера взял большую картинку 1280×733, чтобы заодно показать, как её адаптировать под разные разрешения экранов. Уже прошли те времена, когда достаточно было научиться верстать только под десктопные разрешения. Делая верстку, следует сразу позаботиться об адаптивности.
HTML-разметка
Первым делом создаем контейнер для овощной картинки и для надписей. Обратите внимание, что каждую надпись мы помещаем в отдельный блок с разными классами. И это логично, поскольку все надписи будут иметь свои координаты на странице, а мы будем управлять ими, прописывая свойства в дивах.
После сделанной HTML-разметке, мы видим только фрагмент картинки и текст, оказавшийся под картинкой. Знакомая картина, не правда ли?
Картинка разъехалась на все свои немаленькие пиксели и появилась горизонтальная полоса прокрутки, но к счастью это легко исправить, задав ширину картинке 100%, тем самым сделав её адаптивной. Хотя бы одну проблему решили.
Теперь займемся текстом.
CSS-стили
В стилях контейнера, ключевым будет свойство position: relative. Этим мы меняем правила и просим вести отсчет координат не от верхнего левого угла окна браузера, а от угла контейнера, который является родителем для всех вложенных в него элементов и занимает 90% окна.
Дальше будем позиционировать надписи, просто подбирая в системе X/Y нужные координаты, делать подбор удобно в Chrome / Инструменты разработчика, копируя и вставляя код в файл со стилями.
Мы задали координаты не в пикселях, а в % не случайно, при уменьшении размеров экрана, тогда текст будет оставаться там же, где мы его закрепили. Это хорошая новость, а плохая это то, что размер текста не уменьшается вместе с картинкой. Картинка сама уменьшается, а текст надо уменьшать принудительно.
Медиа-запросы
На разрешении равным или меньше 768 пикселей, уменьшить размер шрифта до 150%. Откуда мы узнали, что надо уменьшать именно на 768 пикселях? Через инспектор кода, мы увидели, на какой отметке текст наскакивает на соседние элементы.
@media screen and (max-width: 768px)
>
Одного запроса оказалось недостаточно, уменьшили размер текста и на 470 пикселях.
@media screen and (max-width: 470px)
>
Конечный результат
Посмотрите на реальной странице, как прекрасно смотрится текст на картинке на разных разрешениях.
Демонстрация.
Из данного видео-курса «HTML5 и CSS3 с Нуля до Гуру»вы получите систематизированные знания о том, как делаются сайты, на простых примерах.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Как на картинке написать текст css
Вообще, сам вопрос несложен. Нет ничего хитрого, чтобы расположить один блок, поверх другого. Но всё-таки, есть и в этом вопросе несколько моментов, достойных обсуждения. Я думаю найдутся люди, кому это будет интересно.
Идея состоит в том, чтобы просто накладывать некоторый текст на изображение. Текст представлен в виде блоков переменной длины, предполагается что он будет расположен с левой стороны, с ровной заливкой вокруг текста. Например, как на этом изображении:
Схема документа
HTML-разметка
Конечно, было бы легче использовать div-элемент для вывода изображения в качестве фонового рисунка, но в данном случае я предполагаю, что изображение — это контент документа, и, следовательно, оно принадлежит HTML. Элемент div будем использовать в качестве контейнера для абсолютного позиционирования текста в нём.
Таким образом, мы разместили текст непосредственно поверх изображения. Следующая наша задача сделать фон для текста. Поскольку элемент является блочным элементом, то его мы использовать для этих целей не можем. Воспользуемся inline-элементом . Обернём в него текст внутри заголовка.
Будем использовать этот span для оформления текста и фона:
Проблемы
Как видно из рисунка, в конце строки блок текста заканчивается непосредственно после последнего символа в строке, и начинается сразу же по левому краю на следующей строке. Свойство padding для span-а, в данном случае, нам не поможет.
Чтобы решить проблему, необходимо использовать дополнительные span-ы по обе стороны от тега
, в этом случае мы уже сможем воспользоваться padding-ом.
Этим новым span-ам мы зададим свойство padding:
Что на счёт семантики?
На данном этапе дизайн завершен, но при этом осталась одна проблема. А именно, огромное количество дополнительных элементов HTML добавленных только для дизайна. Я имею в виду span-ы. Чтобы решить эту проблему, воспользуемся jQuery. Для этого удалим все span-ы в разметке, и динамически добавим их:
CSS: работа с текстом на изображениях
Вы можете встретить компонент пользовательского интерфейса, у которого есть текст над изображением. В некоторых случаях в зависимости от используемого изображения текст будет трудно прочитать. У этой проблемы есть несколько различных решений, таких как добавление градиента или затемнение изображения, наложение тени на текст и другие. Этот прием будет полезен не только frontend и веб-разработчикам, но и ui/ux-дизайнерам. Написать эту статью меня вдохновил твит от Эдди Османи, работающего над Google Chrome.
Здесь я рассмотрю различные подходы и решения этой проблемы, а также то, как передать пользовательский интерфейс фронтенд разработчику таким образом, чтобы гарантировать, что UI реализован в соответствии с макетом дизайна, поскольку некоторые детали в CSS можно легко упустить.
Как Spotify делает текст на изображениях более читабельным: наложение CSS с линейным градиентом. В наши дни более распространенный, но все же эффективный метод улучшения цветового контраста
Вступление
Давайте посмотрим на нашу задачу. При разработке компонента с текстом над изображением мы должны позаботиться о том, чтобы текст было легко прочитать.
Слева без оверлея, справа с оверлеем.
Обратите внимание, что версия без наложения градиента читается плохо. Для пользователя это нехорошо. Чтобы решить эту проблему, нам нужно добавить слой под текстом так, чтобы текст читался легко. Добавление этого слоя может быть сложной задачей, и я видел многих, кто внедряет это решение, не принимая во внимание доступность.
Обзор возможных решений
Давайте посмотрим на возможные решения.
Есть решения, требующие большего внимания, — это градиентные решения. Почему? Потому что добавить слой градиента — это очень просто, но текст не будет удобным.
Решения
Наложение градиента
Вообще говоря, наложение градиента — это наиболее распространённое решение, позволяющее сделать текст на изображении более чётким. Учитывая это, я остановлюсь на нём немного подробнее.
При реализации наложения градиента у нас есть два варианта:
Использовать отдельный элемент для градиента (псевдоэлемент или пустой )
Применить градиент как фоновое изображение.
У каждого из вышеперечисленных есть свои плюсы и минусы, давайте рассмотрим их.
Элемент содержимого позиционируется абсолютно, его фоновым изображением служит градиент. Это означает, что размер градиента равен высоте элемента.
На первый взгляд может показаться, что градиент хорошо работает. Это не так. Я протестировал тот же градиент с большим количеством изображений, и вот результат.
Обратите внимание, что контраст между белым текстом и изображениями не всегда чёткий. Некоторые люди прочитают текст, но использовать такой градиент — огромная ошибка.
Причина в том, что градиент должен покрывать больше пространства по вертикали, поэтому должен быть выше. Если градиент равен размеру контента, он будет работать не во всех случаях. Чтобы решить эту проблему, мы можем использовать min-height, как показано ниже:
min-height к элементу .card__content.
Flexbox для перемещения содержимого вниз.
Другое решение — большой padding-top, с ним не нужны min-height и flexbox.
Обратите внимание на разницу между левой и правой карточками. Градиент больше по высоте.
Выглядит хорошо. Можем ли мы сделать лучше? Определённо да!
Смягчение градиента
Присмотревшись, вы заметите, где заканчивается градиент, то есть у него резкая граница.
Чтобы сделать лучше, мы можем применить смягчение градиента. Таким образом градиент будет выглядеть естественнее, и вы не заметите резких краёв в его конце.
Чтобы достичь плавности, в CSS нам нужно несколько границ перехода градиента, но на момент написания этой статьи в CSS нет нативного способа сделать несколько границ. Хорошая новость заключается в том, что рабочая группа CSS обсуждает возможность реализации нативного смягчения градиентов на CSS, но остаётся неясным, когда эту возможность внедрят.
К счастью, г-н Андреас Ларсен создал удобные плагины PostCSS и Sketch, которые помогают преобразовывать резкий градиент в более мягкий.
Вот градиент CSS для примера выше:
Сравните карточки со смягчением градиента и без него.
Горизонтальные градиенты
Работа с текстом поверх изображения не может касаться только вертикального градиента, можно работать и с горизонтальным.
Вот CSS градиента для раздела выше. Чтобы добиться смягчения градиента, я использовал упомянутый ранее инструмент.
Смешивание сплошного цвета и градиента
Я узнал об этом приёме на сайте Netflix. На домашней странице для незарегистрированного пользователя есть заголовок с большим фоновым изображением.
Мне это нравится, но он скрывает многие детали изображения. Используйте этот приём только в том случае, если изображение должно быть декоративным (не приносит реальных преимуществ конечному пользователю).
Вот наглядное объяснение того, как работает этот паттерн.
Наложение градиента и тень текста
Есть небольшая полезная деталь, которая может сделать текст поверх изображений ещё лучше. Всё дело в добавлении к тексту лёгкой тени. Даже когда заметить её нелегко, она может быть очень полезной, если изображение не загружается. Посмотрим на такой пример.
Наложение градиента, тень текста и непрозрачность
Это закономерность, которую я заметил в проигрывателе видео на Facebook. Мне понравилось, что они использовали несколько техник, чтобы сделать текст и другие элементы пользовательского интерфейса чёткими. При работе с проигрывателем очень важно гарантировать, что элементы поверх него заметны.
Что в этом нового? Значки и проигрыватель имеют непрозрачность в 90 %. Это помогает им смешаться с фоном под ними. Создаётся ощущение, что элементы управления вмешаны в изображение.
Кроме того, белая тень у белого текста — эффективный способ сделать текст чётче. Вы хотите доказательства того, что всё вышесказанное будет работать, даже если фон полностью белый? Ну, вот.
Текст и элементы интерфейса хорошо читаются, даже когда изображение полностью беое
Youtube делает то же самое со своими видео.
Вот что мне понравилось в подходе Youtube:
Тёмная рамка для каждого значка, чтобы он лучше выделялся.
Чёрная тень вместо белой для времени видео.
Радиальный градиент
Интересное решение, о котором я узнал от Netflix, — радиальный градиент. Вот как он работает:
Установите основной цвет заднего фона.
Поместите изображение в верхний правый угол с шириной 75 %.
Наложение соответствует размеру и положению изображения.
Тем не менее команда Netflix в качестве оверлея использовала изображение .png. Конкретной причины этого я не знаю. Может быть, дело в проблеме с кросс-браузерностью или что-то в этом роде: я не тестировал решение с радиальным градиентом.
Выбор удобного пользователю цвета наложения
Я покажу отличный инструмент, который помогает выбрать правильную непрозрачность наложения в зависимости от изображения. Посмотрите его на Codepen. Интересная задача — сделать градиент удобным.
В общем, если вы гарантируете, что наложение градиента правильно заполняет текст и имеет подходящий цветовой контраст, всё готово.
Тестирование
Решение нельзя считать хорошим, пока оно не протестировано, верно? Один из способов, который я использую для проверки наложения градиента, — добавление белого фона ниже градиента. Если текст после этого читаемый, то градиент будет работать с любым изображением, а если нет, вам нужно настроить и улучшить его.
В приведённом выше примере я выбрал сплошной цвет под заголовком, а коэффициент контрастности составляет 4,74, такой коэффициент считается хорошим.
Работа с Firefox DevTools
Спасибо Гийсу Вейфейкену: он рассказал мне, что Firefox может тестировать цветовой контраст на градиентах. Это отличная функция.
Если хотите прокачать себя в веб-разработке, освоить специальность frontend-разработчика или стать настоящим Fullstack-универсалом — приходите учиться, а наши опытные менторы и внимательные кураторы помогут вам дойти до финала.
Наложение текста поверх картинки 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 , с которыми вы можете поэкспериментировать.
Пожалуйста, опубликуйте ваши отзывы по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, дизлайки, подписки, лайки, отклики!
Похожие публикации:
- Как поставить заголовок по центру в css
- Как поставить фон на css
- Как при наведении на один объект изменить свойства другого в css
- Как прижать объект к низу блока css
Как написать текст поверх картинки CSS
В начальной стадии изучения HTML и CSS возникают вполне естественные вопросы, такие как сделать то, как сделать это, так и в нашем случае, как написать текст поверх изображения. Эти вопросы являются нормальным проявлением интереса и требуют закрепления знаний в данной области CSS.
На самом деле выполнить написания текста поверх картинки не столь сложно. Это можно сделать за счёт свойства position или background-image , а дальше идет оформление самого текста. То есть блоку div в качестве фона задаём картинку, на которой должен быть расположен текст.
Мы более подробно рассмотрим эти способы применения текста поверх картинки и выделим их преимущества и недостатки в свойствах position и background . Это поможет нам лучше понять, в каких конкретных случаях следует использовать определенный способ размещения текста на изображении.
Текст на картинке CSS. Способ со свойством position
В первом примере мы будем использовать тег img и свойство position для свободного перемещения одного элемента над другим. В данном случае это будет текст и изображении.
HTML
CSS
/* демо */ .image-container < position: relative; >.image-container img < max-width: 100%; height: auto; >.text-overlay < position: absolute; bottom: 40px; left: 40px; background-color: rgba(255, 255, 255, 0.7); padding: 10px; border-radius: 5px; color: #000; font-size: 16px; >/* изменить положение текста для моб.устройств */ @media (max-width:490px) < .text-overlay < bottom: 20px; left: 20px; >>
Пояснение:
Для основного блока image-container устанавливаем свойство position: relative . Это позволяет нам создать область для свободного позиционирования и перемещения элементов внутри этого блока.
Особое внимание уделяем блоку text-overlay, который содержит текст. Для него мы устанавливаем свойство position: absolute . Это позволяет нам свободно перемещать текстовый элемент в пределах основного блока.
Этот метод подходит практически во всех случаях, за исключением «фоновых блоков», которые полностью заполняют HTML-контейнер изображением. Такой формат часто применим в Landing Page с использованием background-image , что даёт больше возможностей для адаптивности и создания параллакс-эффекта без скриптов.
Длина текста
Если ваш текст состоит из целого предложения и растягивается на всю ширину, то необходимо правильно его стилизовать, то есть обозначить рамки области. Для этого мы добавим новое свойство width , чтобы указать ширины блока с текстом.
HTML
CSS
/* демо */ .image-container < position: relative; >.image-container img < max-width: 100%; height: auto; >.text-overlay < position: absolute; bottom: 40px; left: 40px; background-color: rgba(0, 0, 0, 0.7); padding: 10px; border-radius: 5px; color: #fff; font-size: 16px; max-width: 365px; /* ширина блока с текстом */ /* размытие заднего фона */ backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); >/* изменить положение текста для моб.устройств */ @media (max-width:490px) < .text-overlay < bottom: 15px; left: 15px; font-size: 14px; max-width: 255px; >>
CSS: Каждая строка текста с фоном
Приведенные выше примеры были оформлены с одним сплошным фоном для текста. Но при необходимости можно применить иной подход: установить фон для каждой отдельной строки текста, и при этом с интервалом между ними.
HTML
CSS
/* демо */ .image-container < position: relative; >.image-container img < max-width: 100%; height: auto; >.text-overlay < position: absolute; bottom: 40px; left: 40px; color: #fff; font-size: 16px; max-width: 365px; /* ширина блока с текстом */ >.text-overlay span < box-decoration-break: clone; line-height: 32px; background-color: rgba(0, 0, 0, 0.7); padding: 5px 10px; border-radius: 5px; >/* изменить положение текста для моб.устройств */ @media (max-width:490px) < .text-overlay < bottom: 10px; left: 10px; font-size: 14px; max-width: 285px; >>
В данном примере ключевую роль играет свойство box-decoration-break: clone , поскольку оно позволяет рассматривать каждую строку как отдельный элемент с теми же стилями оформления, применяемыми ко всему блоку.
Надпись поверх изображения CSS. Способ со свойством background
Этот способ включает в себя применение свойства background-image для установки изображения в качестве фона HTML-контейнера. И получается, что любое содержимое этого контейнера будет находиться поверх картинки.
HTML
CSS
/* демо */ .image-container < background-image: url("img/4-primer.jpg"); /* указать путь к картинке */ background-size: cover; background-repeat: no-repeat; background-position: center; height: 300px; max-width: 100%; >.text-overlay < color: #fff; font-size: 16px; background-color: rgba(0, 0, 0, 0.7); padding: 10px 10px; display: inline-block; border-radius: 5px; max-width: 325px; margin-left: 30px; margin-top: 30px; >/* изменить положение текста для моб.устройств */ @media (max-width:490px) < .text-overlay < margin-left: 10px; margin-top: 10px; font-size: 14px; max-width: 285px; >>
Преимущества использования свойства background-image по сравнению с первым методом заключаются в более гибком управлении стилями CSS. Мы сможем контролировать размер фонового изображения, что позволяет нам адаптировать его даже в том случае, если оно меньше размеров самого блока. И при этом сохраним пропорциональность картинки при заполнении всей доступной области. Кроме того, с помощью CSS можно легко добавить различные эффекты, включая эффект параллакса.
Псевдоэлементы CSS – текст на картинке
Добавление текста на картинку при помощи псевдоэлементов before или after применяются крайне редко. Но всё же бывают такие случаи, когда приходится прибегать к этим нестандартным способом. В этом нам поможет свойство content и свободное позиционирование.
HTML
CSS
/* демо */ .image-container < position: relative; >.image-container img < max-width: 100%; height: auto; >.image-container:before < content: "Новые «Семь чудес света»"; position: absolute; bottom: 40px; left: 40px; color: #fff; font-size: 16px; max-width: 300px; background-color: rgba(0, 0, 0, 0.7); padding: 15px 10px; border-radius: 5px; >/* изменить положение текста для моб.устройств */ @media (max-width:490px) < .image-container:before < bottom: 10px; left: 10px; font-size: 14px; max-width: 285px; >>
Такой подход будет полезным, когда нет возможности вносить изменения в HTML-код напрямую. В данном случае текст добавляется исключительно через CSS-стили. Он подойдет для небольших фраз и исключительно в дизайнерском оформлении.
Читайте также:
- Одинаковая высота блоков CSS
- Показать/скрыть текст. Примеры на JS, CSS
- Псевдокласс root: переменные CSS
- CSS: ограничить количество строк
- CSS инструменты – онлайн-генераторы
- Как сделать ссылку на телефон, email и мессенджеры кликабельной
- Как сделать блок на всю высоту страницы
- Карточка товара CSS. Красивое оформление
- Стили радио кнопок и чекбоксов CSS. Дизайн Material Design
- Мотивирующие CSS кнопки «Нажми на меня»