Как на картинке написать текст html css

В начальной стадии изучения языков HTML, CSS и пр. появляются (как это и должно быть) вопросы: как сделать так, или вот, так и в нашем вопросе, как написать текст поверху изображения. Вполне естественное проявление интереса, и требует закрепление знаний в этой области. Но для выполнения этой задачи вы уже должны знать хоть малую часть CSS чтобы понимать базовые свойства каскадной таблицы.

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

Но такой способ ограничивает возможности и само применение текста поверх картинки. Поэтому лучшим вариантом будет воспользоваться свойством position. Данный элемент дает большие преимущества и полную свободу движения в указанной области, эта область обозначается свойством position: relative;. А иначе позиционирование будет происходить по отношению к браузеру.

Рассмотрим на первом примере.

HTML

<div class='imgblock'>
<img src='egipet.jpg' title='Семь чудес света'>
<span>Пирамиды Египта</span>
</div>

CSS

.imgblock {
    position: relative;
    display: inline-block;
}

.imgblock img {
    height: 160px;
    width: 250px;
}
.imgblock span {
    /*background: rgba(0,0,0,0.7); (полупрозрачность)*/
    background: #222;
    color: #fff;
    border-radius: 2px;
    position: absolute;
    right: 0;
    bottom: 10px;
    font-size: 18px;
    padding: 3px 5px;
}

Результат.

Пояснение. Основному блоку приписывается значение position: relative; этим мы обозначаем область для свободного позиционирования последующих элементов в этом классе.

Далее, форматируем div в линейно–блочный элемент display: inline-block;

И последнее на что стоит обратить внимание — это position: absolute;, задан элементу <span>.

Остальные стили идут как оформление текста.

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

HTML

<div class='imgblock2'>
<img src='sad.jpg' title='Семь чудес света'>
<h2><span>Семь чудес света <br /> Висячие сады Семирамиды</span></h2>
</div>

CSS

.imgblock2 {
     position: relative;
    display: inline-block;
}

.imgblock2 img {
    height: 160px;
    width: 250px;
}

.imgblock2 h2 {
    left: 0;
    position: absolute;
    top: 10px;
    width: 100%;
    left: 5px;
}
.imgblock2 h2 span {
    background: #222;
    border-radius: 2px;
    color: #fff;
    font: 16px arial;
    line-height: 29px;
    padding: 3px 5px;
}

Результат.

Ну вот незадача, мы использовали тег <br /> — перенос строки и в итоги получили разрыв между пробелами. Это видно в примере где текст плотно прилегает краям и на вид получается не очень красиво.

Исправить эту ошибку можно по-разному. Применить, к примеру, неразрывный пробел &nbsp, что позволит нарастить промежуток.

Пример.

HTML

<div class='imgblock2'>
<img src='sad.jpg' title='Семь чудес света'>
<h2><span>Семь чудес света &nbsp<br />&nbsp Висячие сады Семирамиды</span></h2>
</div>

CSS

.imgblock2 {
     position: relative;
    display: inline-block;
    margin: 100px;
}

.imgblock2 img {
    height: 160px;
    width: 250px;
}

.imgblock2 h2 {
    left: 0;
    position: absolute;
    top: 10px;
    width: 100%;
    left: 5px;
}
.imgblock2 h2 span {
    background: none repeat scroll 0 0 #222;
    border-radius: 2px;
    color: #fff;
    font: 16px arial;
    line-height: 29px;
    padding: 3px 5px;
}

Результат.

Во втором способе применим тег <b>…</b> он как <strong> только жирность поменьше, но мы ее совсем уберем.

Пример.

HTML

<div class="imgblock3">
<img src='sad.jpg' title='Семь чудес света'>
<span>
<b>Семь чудес света</b>
<b>Висячие сады Семирамиды</b>
</span>
</div>

CSS

.imgblock3 {
    position: relative;
   display: inline-block;
}
.imgblock3 img {
    height: 200px;
    width: 300px;
}
.imgblock3  span {
    left: 10px;
    position: absolute;
    top: 10px;
    width: 100%;
}
.imgblock3 span b {
    background: #222;
    color: #fff;
    font: 16px/34px arial;
    padding: 6px 10px;
    white-space: nowrap;
    border-radius: 3px;
}

Результат.

В стилях добавили новое свойство white-space: nowrap; чтобы текст находился на одной строке. На этом все, сложного думаю ничего нет.

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

Подписаться на новые статьи

Время на прочтение
7 мин

Количество просмотров 16K

---

Вступление

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

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

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

Давайте посмотрим на возможные решения.

Есть решения, требующие большего внимания, — это градиентные решения. Почему? Потому что добавить слой градиента — это очень просто, но текст не будет удобным.

Решения

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

Вообще говоря, наложение градиента — это наиболее распространённое решение, позволяющее сделать текст на изображении более чётким. Учитывая это, я остановлюсь на нём немного подробнее.

При реализации наложения градиента у нас есть два варианта:

• Использовать отдельный элемент для градиента (псевдоэлемент или пустой <div>)

• Применить градиент как фоновое изображение.

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

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

.card__content {
  position: absolute;
  /* other styles (left, top, right, and padding) */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

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

Обратите внимание, что контраст между белым текстом и изображениями не всегда чёткий. Некоторые люди прочитают текст, но использовать такой градиент — огромная ошибка.

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

min-height к элементу .card__content.

Flexbox для перемещения содержимого вниз.

.card__content {
  position: absolute;
  /* other styles (left, top, right, and 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 {
  position: absolute;
  padding-top: 60px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

Обратите внимание на разницу между левой и правой карточками. Градиент больше по высоте.

Выглядит хорошо. Можем ли мы сделать лучше? Определённо да!

Смягчение градиента

Присмотревшись, вы заметите, где заканчивается градиент, то есть у него резкая граница.

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

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

К счастью, г-н Андреас Ларсен создал удобные плагины PostCSS и Sketch, которые помогают преобразовывать резкий градиент в более мягкий.

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

.card__content {
  background-image: linear-gradient(
    0deg,
    hsla(0, 0%, 35.29%, 0) 0%,
    hsla(0, 0%, 34.53%, 0.034375) 16.36%,
    hsla(0, 0%, 32.42%, 0.125) 33.34%,
    hsla(0, 0%, 29.18%, 0.253125) 50.1%,
    hsla(0, 0%, 24.96%, 0.4) 65.75%,
    hsla(0, 0%, 19.85%, 0.546875) 79.43%,
    hsla(0, 0%, 13.95%, 0.675) 90.28%,
    hsla(0, 0%, 7.32%, 0.765625) 97.43%,
    hsla(0, 0%, 0%, 0.8) 100%
  );
}

Сравните карточки со смягчением градиента и без него.

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

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

Вот 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%
);

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

Я узнал об этом приёме на сайте Netflix. На домашней странице для незарегистрированного пользователя есть заголовок с большим фоновым изображением.

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

<div class="hero">
  <img src="cover.jpg" alt="" />
  <div class="hero__content">
    <h2>Unlimited movies, TV shows, and more.</h2>
    <p>Watch anywhere. Cancel anytime.</p>
  </div>
</div>

.hero:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8),
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0.8) 100%
  );
}

Вот наглядное объяснение того, как работает этот паттерн.

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

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

.whatever-text {
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

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

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

.player__icon {
  opacity: 0.9;
}

.player__time {
  color: #fff;
  text-shadow: 0 0 5px #fff;
}

Что в этом нового? Значки и проигрыватель имеют непрозрачность в 90 %. Это помогает им смешаться с фоном под ними. Создаётся ощущение, что элементы управления вмешаны в изображение.

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

Youtube делает то же самое со своими видео.

Вот что мне понравилось в подходе Youtube:

• Тёмная рамка для каждого значка, чтобы он лучше выделялся.

• Чёрная тень вместо белой для времени видео.

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

Интересное решение, о котором я узнал от Netflix, — радиальный градиент. Вот как он работает:

1. Установите основной цвет заднего фона.

2. Поместите изображение в верхний правый угол с шириной 75 %.

3. Наложение соответствует размеру и положению изображения.

.hero {
  background-color: #000;
  min-height: 300px;
}

.hero__image {
  position: absolute;
  right: 0;
  top: 0;
  width: 75%;
  height: 100%;
  object-fit: cover;
}

.hero:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 75%;
  height: 100%;
  background: radial-gradient(
    ellipse 100% 100% at right center,
    transparent 80%,
    #000
  );
}

Тем не менее команда Netflix в качестве оверлея использовала изображение .png. Конкретной причины этого я не знаю. Может быть, дело в проблеме с кросс-браузерностью или что-то в этом роде: я не тестировал решение с радиальным градиентом.

Выбор удобного пользователю цвета наложения

Я покажу отличный инструмент, который помогает выбрать правильную непрозрачность наложения в зависимости от изображения. Посмотрите его на Codepen. Интересная задача — сделать градиент удобным.

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

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

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

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

Работа с Firefox DevTools

Спасибо Гийсу Вейфейкену: он рассказал мне, что Firefox может тестировать цветовой контраст на градиентах. Это отличная функция.

Если хотите прокачать себя в веб-разработке, освоить специальность frontend-разработчика или стать настоящим Fullstack-универсалом — приходите учиться, а наши опытные менторы и внимательные кураторы помогут вам дойти до финала.

Узнайте, как прокачаться в других специальностях или освоить их с нуля:

• Профессия Data Scientist

• Профессия Data Analyst

• Курс по Data Engineering

Другие профессии и курсы

Текст сверху картинки по центру.

Как поставить картинку по центру картинки!? Как вообще написать текст на картинке html?

Html:

Css:

Результат «как написать текст поверх картинки в html«:

Текст сверху картинки в левом углу

Для того, чтобы поставить текст сверху картинки в html. Нам понадобится каркас div внутри картинка img + span

Html:

Позиционируем текст поверх картинки с помощью css:

css:

Пример : Текст сверху картинки в левом углу

При наведении на картинку появляется текст html

Смотри еще : появление надписи

Ну и следующий вариант → «При наведении на картинку появляется текст html» :

Не стал делать отдельным пунктом — текст справа. Этот вариант можно немного модифицировать(убрать hover и у текста убрать opacity: 0) и будет у вас тест справа на картинке.

Html:

css:

Пример появления текст на картинке html

Пишем текст поверх изображения

Вообще, сам вопрос несложен. Нет ничего хитрого, чтобы расположить один блок, поверх другого. Но всё-таки, есть и в этом вопросе несколько моментов, достойных обсуждения. Я думаю найдутся люди, кому это будет интересно.

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

Схема документа

HTML-разметка

<div class="image">
	<img src="image1.jpg" alt="" />
	<h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>

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

.image {
	position	: relative;
	width		: 100%; /* for IE 6 */
}

h2 {
	position	: absolute;
	top		: 200px;
	left		: 0;
	width		: 100%;
}

Таким образом, мы разместили текст непосредственно поверх изображения. Следующая наша задача сделать фон для текста. Поскольку элемент <h2> является блочным элементом, то его мы использовать для этих целей не можем. Воспользуемся inline-элементом <span>. Обернём в него текст внутри заголовка.

<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>

Будем использовать этот span для оформления текста и фона:

h2 span {
	color			: white;
	font			: bold 24px/45px Helvetica, Sans-Serif;
	letter-spacing		: -1px;
	background		: rgb(0, 0, 0); /* на случай, если следующая строка не сработает */
	background		: rgba(0, 0, 0, 0.7);
	padding			: 10px;
}

Проблемы

Как видно из рисунка, в конце строки блок текста заканчивается непосредственно после последнего символа в строке, и начинается сразу же по левому краю на следующей строке. Свойство padding для span-а, в данном случае, нам не поможет.

Чтобы решить проблему, необходимо использовать дополнительные span-ы по обе стороны от тега <br />, в этом случае мы уже сможем воспользоваться padding-ом.

<h2>
	<span>A Movie in the Park:
		<span class="spacer"></span>
		<br />
		<span class="spacer"></span>
		Kung Fu Panda
	</span>
</h2>

Этим новым span-ам мы зададим свойство padding:

h2 span.spacer {
	padding	: 0 5px;
}

Что на счёт семантики?

На данном этапе дизайн завершен, но при этом осталась одна проблема. А именно, огромное количество дополнительных элементов HTML добавленных только для дизайна. Я имею в виду span-ы. Чтобы решить эту проблему, воспользуемся jQuery. Для этого удалим все span-ы в разметке, и динамически добавим их:

<h2>
	A Movie in the Park:<br />Kung Fu Panda
</h2>

$(function() {
	$("h2").wrapInner("<span>");
	$("h2 br").before("<span class='spacer'>")
		.after("<span class='spacer'>");
});

Пример

Как сделать — Текст на изображении

---

---

Узнать, как разместить текст поверх изображения.

---

Текст на изображении

Редактор кода »

---

Создать текст на изображении

Шаг 1) Добавить HTML:

---

Шаг 2) Добавить CSS:

Чтобы узнать больше о том, как стилизовать изображения, прочитайте наш учебник CSS Изображения.

Чтобы узнать больше о позиционировании CSS, прочитайте наш учебник CSS Позиция.