Разберёмся с компонентом пользовательского интерфейса, у которого текст должен быть размещён поверх изображения. В некоторых случаях, в зависимости от изображения под ним, этот текст прочитать будет непросто. Существует несколько различных способов решения этой проблемы: добавление градиента или затемнение части изображения, тени для текста и др.
Здесь будут рассмотрены различные подходы для решения этой проблемы.
Вступление
При разработке компонента, у которого текст должен располагаться над изображением, следует позаботиться о том, чтобы этот текст был контрастным и легко читаемым.
Текст над картинкой слева, без наложения градиента, растворяется в изображении и плохо читается. Это нехорошо для пользователя. Чтобы решить эту проблему и текст было легко читать, между ним и изображением нужно добавить слой-подложку. Добавление такого слоя кажется простой задачей, если не принимать во внимание доступность текста людям с ограниченными возможностями.
Обзор возможных решений
Существуют разные способы решения проблемы чтения текста, расположенного поверх картинки, рассмотрим их.
Выше предлагается обзор различных вариантов решения проблемы. Более пристального внимания могут потребовать градиентные решения. Потому что добавить слой с градиентом очень просто, но при этом могут появиться сложности с читаемостью текста.
Решения
Наложение градиента
Такой способ с наложением градиента поверх изображения – наиболее распространенное решение, позволяющее сделать текст над картинкой более чётким. Поэтому, рассмотрим его подробнее.
Для наложения градиента есть два способа:
Использовать отдельный элемент для градиента (псевдоэлемент или пустой )
Применить градиент, как фоновое изображение.
У каждого из этих способов есть свои плюсы и минусы, рассмотрим их.
Элемент содержимого позиционируется абсолютно, и у него есть градиент в качестве фонового изображения. Это означает, что размер градиента равен высоте элемента.
.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-градиента для такого случая. Здесь используется упомянутая ранее техника ослабления для создания плавного градиента.
Подходит для заголовка с большим фоновым изображением, но он может скрывать какие-то детали на картинке.
Такой способ лучше применять, когда детали изображенного на картинке не имеют особой ценности, в отличие от текста над ней. Тогда подойдет такая 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 к выделению текста и кнопок:
У каждого значка, чтобы он лучше выделялся, сделаны темные края.
Для цифр длительности видео используется чёрная тень вместо белой.
Радиальный градиент
Ещё одно интересное решение – использование радиального градиента. Это работает так:
Надо установить базовый цвет заднего фона для контейнера.
Расположить изображение в верхнем правом углу, установить ему ширину 75%.
Наложение должно соответствовать размеру и положению изображения.
Интересная задача – обеспечить людям с ограниченными возможностями доступность рассмотренных выше вариантов использования градиентов для читаемости текста, располагаемого поверх изображения.
Этот инструмент поможет выбрать правильную прозрачность подложки в зависимости от изображения и цвета текста.
Если убедитесь, что наложение градиента правильно заполняет текст и имеет приличный цветовой контраст, все готово к использованию.
Тестирование
Любое решение нельзя считать хорошим, пока оно не будет проверено и протестировано. Один из способов, который можно использовать для проверки градиента подложки – добавить под ним белый фон. Если текст хорошо читается, то градиент будет работать с любым изображением, которое используете. Если нет, нужно его тщательнее настроить и улучшить.
В приведённом выше примере под заголовком выбран сплошной цвет, а коэффициент контрастности составляет 4,74 и это очень неплохо.
Использование Firefox DevTools
Firefox может выполнять проверку цветового контраста градиентов. Эту отличную особенность тоже можно использовать для оценки читаемости текста.
Как сделать — Текст на изображении
Внизу слева
Вверху слева
Вверху справа
Внизу справа
Centered
Шаг 2) Добавить CSS:
Пример
/* Контейнер, содержащий изображение и текст */ .container position: relative; text-align: center; color: white; >
/* Нижний левый текст */ .bottom-left position: absolute; bottom: 8px; left: 16px; >
/* Верхний левый текст */ .top-left position: absolute; top: 8px; left: 16px; >
/* Верхний правый текст */ .top-right position: absolute; top: 8px; right: 16px; >
/* Нижний правый текст */ .bottom-right position: absolute; bottom: 8px; right: 16px; >
Чтобы узнать больше о том, как стилизовать изображения, прочитайте наш учебник CSS Изображения.
Чтобы узнать больше о позиционировании CSS, прочитайте наш учебник CSS Позиция.
Как поверх картинки сделать надпись
Текст тоже должен находиться внутри какого-нибудь тега. Я поместил надпись в тег .
Возможно, у Вас уже есть конструкция с тегом . Например, такая:
Надпись
Тогда никакие дополнительные теги Вам не нужны, будете работать с Вашим кодом.
Итак, чтобы текст переместился над изображение, нужно воспользоваться CSS. Для тега-обертки нужно задать какое-то позиционирование, а для надписи обязательно абсолютное позиционирование (position: absolute).
Если Вы не знаете CSS, то код можно писать прямо в HTML. Вот пример:
Надпись
Ну, а далее, нужно просто переместить текст в необходимое место над картинкой.
Для конструкции с тегом нужно сделать аналогичные действия.
Добавить комментарий Отменить ответ
Этот сайт, как и все сайты, использует cookie. Продолжая использовать этот сайт, Вы даете свое согласие на обработку cookie.OK
Manage consent
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duration
Description
cookielawinfo-checkbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Analytics».
cookielawinfo-checkbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category «Functional».
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category «Necessary».
cookielawinfo-checkbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Other.
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Performance».
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
CSS наложение: как написать текст на изображении
Ранее рассмотрели как написать текст на изображении в Фотошопе, теперь же время сделать это средствами CSS.
Благодаря тому, что мы задаём внешнему элементу position: relative, а внутреннему position: absolute, один блок ложиться поверх другого. В качестве примера возьмём светлый и темный прямоугольник:
Указав свойство position, мы не увидим изменений, но теперь светлый блок будет перемещаться в рамках тёмного благодаря свойствам left, top, right и bottom. Например, поместим светлый прямоугольник по центру тёмного
Вышеуказанные свойства могут принимать отрицательные значения. Тогда элемент выходит за границы тёмного прямоугольника.
position: absolute и position:relative
Поскольку HTML код веб-документа представляет из себя матрёшку, где один элемент находится внутри другого, то посмотрим на ситуацию в целом. Например, с четырьмя слоями. Точкой отсчёта для свойств top, bottom, right, left является граница родительского элемента с position не в значении static (по умолчанию).
Отрицательные значения смещают светлый блок на территорию другого контейнера. Но эту часть блока мы не увидим, коли будет добавлено свойство overflow: hidden.
position:relative; overflow: hidden;
Если же нужно показать только часть светлого блока, неравномерно убрав ненужные пиксели, то используется свойство clip: rect(вверх, вправо, вниз, влево); которое не применимо без position: absolute. auto показывает, что сторона остаётся без изменений.
Взаимодействие блока с position: absolute с другими элементами
Мы можем в одном блоке разместить несколько элементов. Для удобства восприятия, не буду указывать попутные свойства.
А
Б
Если блоку А присвоить position: absolute, то блок Б расположиться так, словно блока А не существует — он займёт его место. Блок А уже не сможет влиять на положение блока Б ни посредством float: left, ни своей площадью, словно он парит над ним.
А
Б
Блок А перекрывает блок Б. Но стоит второму добавить position в значении relative, absolute или fixed, как ситуация измениться.
Теперь приоритетным будет тот блок, который расположен ниже в коде, в данной случае белый Б. Для того, чтобы изменить естественный порядок, мы используем z-index. Чем больше значение этого параметра, тем выше находится элемент. Стоит помнить лишь то, что для position: static это свойство игнорируется (искл. свойство transform) и то, что в IE существует один изъян.
Поскольку элементы не могут влиять на положение друг друга, то без указания для них значений (или если значения одинаковы) top, bottom, right, left, transform: translate и margin, ложатся друг поверх друга. А высота родительского блока, коли она не установлена фиксировано, равна нулю. На этом принципе основаны многие вещи, в том числе CSS табы.
width (или height) не применяется для большинства встроенных элементов. Имеет по умолчанию значение auto, что для блочного элемента равнозначно width: 100%.
Блочный
Встроенный
Вст роен ный
Но не при position: absolute. Здесь блочный элемент не будет растягиваться на ширину родительского элемента. Зато встроенные элементы займут указанную ширину. Но на них по прежнему будут влияют такие свойства, как text-align (обратите внимание на эту статью).
.temnyi .svetlyi
Встроенный
Вст роен ный
width: 100%; для обоих — это ширина родителя, для которого задано позиционирование отличное от static.
Блочный
Встроенный
Вст роен ный
Если width не задано, но есть указание противоположных значений left и right, то блок растянется на всю ширину между этими двумя точками. Иначе right будет проигнорирован.
Блочный
Встроенный
Вст роен ный
Пример как написать текст на изображении.
Указанные ниже образцы продемонстрируют возможности применения CSS наложения.
Лес и поле белые, Белые луга. У осин заснеженных Ветки как рога.
Подо льдами крепкими Дремлют воды рек. Белыми сугробами Лег на крыши снег.
В небе звезды яркие Водят хоровод. Старый год прощается — Входит Новый год.
Пример как разместить текст поверх изображения на HTML
ЗАГОЛОВОКпрозрачная область
По материалам http://vagabundia.blogspot.com.
30 комментариев:
Евгений Xstroy Образец с вырастающей буквой порадовал. Уже как-то использовал слои для сбора шапки строительного сайта, но не думал таким образом их юзать. Спасибо за интересное решение. Анонимный Замечательная информация, большое спасибо автору. NMitra Благодарю за добрые слова! Анонимный ОГРОООМНОЕ Вам спасибо. NMitra Приятно слышать! Анонимный Замечательный блог. Рада, что его нашла. Особенно нравится манера изложения материала: систематизированно, коротко, четко и по теме — без этого словоблудия и надоевших вымученных шуточек, от которых уже подташнивает. Спасибо. NMitra Рада быть полезной. За собой стала замечать, что невольно начинаю копировать других блоггеров. Чур меня ))) Анонимный Спасибо большое многое помогло! Анонимный Спасибо за пост. Очень информативно! Еще раз спасибо 🙂 Анонимный Как же я рад, что попал на на эту статью! Пример с лошадью — это то, что мне было нужно, прямо точь в точь. Я очень счастлив! NMitra Значит примеры размещаю не зря))) Анонимный огромное спасибо очень нужный материал разложен по полкам, может я канешно и глупый вопрос задам но подскажите пожалуйста как выставить последний пример со всеми значениями в центральном положении благодарю за полезный материал NMitra Подправила код последнего примера прямо в статье. MIKTTD Во первых — Спасибо за шпаргалку! В предпоследнем примере зум буквы «а» не работает, поправьте пожалуйста (самому знаний не хватает). И еще там-же для ІЕ нужно добавить: «transform: skew(20deg)». NMitra Поправила, когда писала статью, о поддержке IE можно было только мечтать. Сейчас можно применить префикс -ms- Анонимный Почему то не работает в IE всплывающий текст. Как можно решить? Спасибо за помощь. NMitra В каком именно примере? Анонимный Спасибо большое Анонимный Самое толковое о position из всего, что я до сих пор встречал. Анонимный ужасное решение некорректно работающее в ИЕ Анонимный Спасибо за работу, достойное изложение, в закладки NMitra Благодарю за отзывы! Николай Березин четкое, предельно ясное изложение, лайк и в закладки! NMitra Спасибо! Юля Шикарный пост. Спасибо. Очень долго искала как наложить текст на картинку.. кучу сайтов пересмортрела.. то css, то php надо править, то все вместе. километры кодов и непонятно будет ли толк.. А тут все быстро и просто . Жаль что сразу не нашла эту статью))) NMitra Спасибо! Такие комментарии помогают находить силы и время, а главное желание на дальнейшее ведение блога! Сергей Ожерельев Спасибо. Никак не мог понять, как наложить слой на слой NMitra Рада помочь! Unknown А в масштабируемой картинке как сделать текст, чтобы он масштабировался вместе с картинкой на резиновом шаблоне? NMitra Пример: https://jsfiddle.net/kdtok1au/
Надпись
