Как написать текст поверх картинки CSS
В начальной стадии изучения языков HTML, CSS и пр. появляются (как это и должно быть) вопросы: как сделать так, или вот, так и в нашем вопросе, как написать текст поверху изображения. Вполне естественное проявление интереса, и требует закрепление знаний в этой области. Но для выполнения этой задачи вы уже должны знать хоть малую часть CSS чтобы понимать базовые свойства каскадной таблицы.
На самом деле выполнить написания текста поверх картинки не столь трудно. Практически делается за счет свойства position и его атрибутов, а дальше идет оформление самого текста. Можно попробовать сделать по-другому, к примеру, задать блоку div фон при этом использовать ту картинку, на которой должен быть расположен текст.
Но такой способ ограничивает возможности и само применение текста поверх картинки. Поэтому лучшим вариантом будет воспользоваться свойством position . Данный элемент дает большие преимущества и полную свободу движения в указанной области, эта область обозначается свойством position: relative; . А иначе позиционирование будет происходить по отношению к браузеру.
Рассмотрим на первом примере.
HTML
CSS
Пояснение. Основному блоку приписывается значение position: relative; этим мы обозначаем область для свободного позиционирования последующих элементов в этом классе.
Далее, форматируем div в линейно–блочный элемент display: inline-block;
И последнее на что стоит обратить внимание — это position: absolute; , задан элементу <span> .
Остальные стили идут как оформление текста.
Во втором примере используем более длинную надпись на картинке и стилизуем ее должным образом.
HTML
CSS
Ну вот незадача, мы использовали тег <br /> — перенос строки и в итоги получили разрыв между пробелами. Это видно в примере где текст плотно прилегает краям и на вид получается не очень красиво.
Исправить эту ошибку можно по-разному. Применить, к примеру, неразрывный пробел   , что позволит нарастить промежуток.
HTML
CSS
Во втором способе применим тег <b>…</b> он как <strong> только жирность поменьше, но мы ее совсем уберем.
HTML
CSS
В стилях добавили новое свойство white-space: nowrap; чтобы текст находился на одной строке. На этом все, сложного думаю ничего нет.
Handling Text Over Images in CSS
You might come across a UI component that has text above an image. In some cases, the text will be hard to read depending on the image being used. There are some different solutions like adding a gradient overlay, or a tinted background image, text-shadow, and others. I got encouraged to write this article after seeing this tweet from Addy Osmani.
In this article, I will explore the different approaches and solutions for this problem, and how to communicate the UI with a front-end developer to make sure that it’s implemented as per the design mockup since some details can be easily missed in CSS.
Introduction
Each solution is supposed to solve a problem. Let’s explore the problem for our case. When designing a component that has text above an image, we should take care of making the text easy to read.
Notice that the version without a gradient overlay is barely readable. This isn’t good for the user. To solve this, we need to add a layer below the text so that it can be easy to read. Adding that layer can be challenging, and I have seen many who implement this solution without taking accessibility in mind.
An overview of the possible solutions
There are different solutions for making the text easier to read. Let’s get an overview of them.
As you’ve seen, there are different solutions to the problem. The ones that need more care are the gradient solutions. Why? Because it’s so easy to add a gradient layer and the text won’t be accessible.
The solutions
The gradient overlay
Generally speaking, the gradient overlay is the most common solution for making the text on an image much clearer. Given that, I will focus a bit more on it.
When implementing the gradient overlay, we have two options:
- Use a separated element for the gradient (pseudo-element or an empty <div> )
- Apply the gradient as a background image.
Each one of the above has its pros and cons, let’s go through them.
The content element is positioned absolutely, and it has a gradient as a background image. That means the gradient size is equal to the element’s height.
From the first glance, you might think that the gradient is good and it’s doing the job. This isn’t correct. I tested the same gradient with more images and here is the result.
Notice that the contrast between the white text and the images is not always clear. This might be readable for some, but it’s a huge mistake to use such a gradient as it won’t be accessible.
The reason is that the gradient should cover more space vertically, so it needs to be larger in height. Having the gradient equal to the size of the content won’t work in all cases. To solve this, we can either use min-height as the below:
- min-height to the .card__content element.
- Flexbox to push the content to the bottom.
Another solution is to simply use a large padding-top , and we don’t need the min-height and flexbox.
Notice the difference between the left and the right card. The gradient is larger in height.
Alright, that looks good. Can we do better? Yes, definitely!
Easing gradients
If you look closely, you will notice that it’s clear where the gradient ends, which results in a thing called hard edge.
To make this better, we can apply the easing concept to the gradient. That way, the gradient will appear more natural, and you won’t notice a hard edge at the end of it.
In CSS, we need to have multiple gradients stops to achieve the easing, as there is no native way of doing this at the time of writing this article. The good news is that the CSS working group is discussing the possibility of implementing easing in CSS gradients, but it’s not obvious when that will happen.
Thankfully, Mr. Andreas Larsen created a handy PostCSS and Sketch plugins that help in converting a normal gradient to an eased one.
Here is the CSS gradient for the above example:
Here is a comparison between an eased and non-eased card.
Horizontal Gradients
Handling text over an image can’t be only vertical, but we can also use them as a horizontal gradient. Take for example a hero section. It needs a horizontal gradient in that case.
Here is the CSS gradient for the hero section above. I used the tool mentioned previously to generate an eased gradient.
Mixing a solid color and a gradient
I learned about this pattern from Netflix website. On the home page for a non-logged user, there is a headline with a large background image.
I like it, but it hides a lot of the image details. Make sure to use this only when the image is meant to be decorative (doesn’t provide an actual benefit to the end-user).
Here is a visual explanation of how this pattern works.
Gradient overlay and text-shadow
There is a useful little touch that can make text over images even better. It’s all about adding a subtle text-shadow for the text. Even if this might not be easy to notice, it can be very useful in case the image fails to load.
Consider the following example.
Gradient overlay, text-shadow, and opacity
This is a pattern that I noticed on Facebook’s video player. I like that they used multiple techniques to make text (and other UI elements) clear. When dealing with a video player, it’s very important to ensure that an element over it should be noticeable.
What’s new in this is that the icons and the player have opacity: 0.9 . This will help in making them blend with the background underneath them. It gives a feeling that the controls are blended.
Also, using a white text-shadow for white text is an effective way to make the text more clear. Do you want proof that the above will work, even if the background is a fully white image? Here you go.
Youtube is doing a similar thing with their videos, too.
Here is what I liked about Youtube’s approach:
- Using a dark border for each icon so it can stand out more.
- Using a black shadow instead of white for the video time.
Radial gradient
An interesting solution that I learned about from Netflix is using a radial gradient. Here is how it works:
- Set a base back background color for the hero.
- Position the image to the top right with 75% width.
- The overlay is equal to the image size and position.
Though, the Netflix team used a .png image for the overlay. I’m not sure about the reason. It could be a cross-browser issue or something since I didn’t heavily test the radial gradient solution.
Choosing an accessible overlay color
This is a great tool that helps us in picking the right overlay opacity based on the image. Check it out on Codepen. An interesting challenge is to handle the accessibility for a gradient.
Generally speaking, if you make sure that the gradient overlay fills the text correctly, and it has a decent color contrast, you’re good to go.
Testing
A solution can’t be considered good until it’s tested, right? One way that I use to test a gradient overlay is to add a white background below it. If the text is readable, then the gradient will work with whatever image you use. If not, you need to tweak and enhance it.
For the example above, I picked the solid color under the title, and the contrast ratio is 4.74, which is considered good.
Using Firefox DevTools
Thanks to Gijs Veyfeyken for letting me know about Firefox can do a color contrast test on gradients. That’s a great feature.
How to position text over an image with CSS
When I use background-image I do not get any output from html2pdf:
8 Answers 8
Its done by using position:absolute and z-index to place the text over the image.
This is another method for working with Responsive sizes. It will keep your text centered and maintain its position within its parent. If you don’t want it centered then it’s even easier, just work with the absolute parameters. Keep in mind the main container is using display: inline-block . There are many others ways to do this, depending on what you’re working on.
CSS: работа с текстом на изображениях
Вы можете встретить компонент пользовательского интерфейса, у которого есть текст над изображением. В некоторых случаях в зависимости от используемого изображения текст будет трудно прочитать. У этой проблемы есть несколько различных решений, таких как добавление градиента или затемнение изображения, наложение тени на текст и другие. Этот прием будет полезен не только frontend и веб-разработчикам, но и ui/ux-дизайнерам. Написать эту статью меня вдохновил твит от Эдди Османи, работающего над Google Chrome.
Здесь я рассмотрю различные подходы и решения этой проблемы, а также то, как передать пользовательский интерфейс фронтенд разработчику таким образом, чтобы гарантировать, что UI реализован в соответствии с макетом дизайна, поскольку некоторые детали в CSS можно легко упустить.
Как Spotify делает текст на изображениях более читабельным: наложение CSS с линейным градиентом. В наши дни более распространенный, но все же эффективный метод улучшения цветового контраста
Вступление
Давайте посмотрим на нашу задачу. При разработке компонента с текстом над изображением мы должны позаботиться о том, чтобы текст было легко прочитать.
Слева без оверлея, справа с оверлеем.
Обратите внимание, что версия без наложения градиента читается плохо. Для пользователя это нехорошо. Чтобы решить эту проблему, нам нужно добавить слой под текстом так, чтобы текст читался легко. Добавление этого слоя может быть сложной задачей, и я видел многих, кто внедряет это решение, не принимая во внимание доступность.
Обзор возможных решений
Давайте посмотрим на возможные решения.
Есть решения, требующие большего внимания, — это градиентные решения. Почему? Потому что добавить слой градиента — это очень просто, но текст не будет удобным.
Решения
Наложение градиента
Вообще говоря, наложение градиента — это наиболее распространённое решение, позволяющее сделать текст на изображении более чётким. Учитывая это, я остановлюсь на нём немного подробнее.
При реализации наложения градиента у нас есть два варианта:
Использовать отдельный элемент для градиента (псевдоэлемент или пустой <div> )
Применить градиент как фоновое изображение.
У каждого из вышеперечисленных есть свои плюсы и минусы, давайте рассмотрим их.
Элемент содержимого позиционируется абсолютно, его фоновым изображением служит градиент. Это означает, что размер градиента равен высоте элемента.
На первый взгляд может показаться, что градиент хорошо работает. Это не так. Я протестировал тот же градиент с большим количеством изображений, и вот результат.
Обратите внимание, что контраст между белым текстом и изображениями не всегда чёткий. Некоторые люди прочитают текст, но использовать такой градиент — огромная ошибка.
Причина в том, что градиент должен покрывать больше пространства по вертикали, поэтому должен быть выше. Если градиент равен размеру контента, он будет работать не во всех случаях. Чтобы решить эту проблему, мы можем использовать 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-универсалом — приходите учиться, а наши опытные менторы и внимательные кураторы помогут вам дойти до финала.