Как сделать текст в картинке html

Как сделать текст в картинке html

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

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

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

HTML-разметка

 
A Movie in the Park:
Kung Fu Panda
 

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

CSS

.image < position : relative; width : 100%; /* for IE 6 */ >h2

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

A Movie in the Park:
Kung Fu Panda

Будем использовать этот 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-ы по обе стороны от тега
, в этом случае мы уже сможем воспользоваться padding-ом.

 
A Movie in the Park:   

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

h2 span.spacer

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

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

 
A Movie in the Park:
Kung Fu Panda
 

$(function() < $("h2").wrapInner(""); $("h2 br").before("); 

Как на картинку наложить текст в 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 имеет белый цвет и центрируется внутри контейнера.

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

Или вариант что был предложен или воспользуйтесь position: absolute что бы поместить блок поверх другого.

14 фев 2018 в 4:25

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

      
Космоинфо
 
Погрузись в космос вместе с нами!
 
Новости Вопросы Основная

  

Отслеживать

ответ дан 14 фев 2018 в 4:22

user176262 user176262
Попробуй задать как фоновое изображение через CSS/SASS.
.image < background: url('image/image1.png'); width: 320px; height: 280px; //размер условный >
 
Текст Текст Текст
 
 
Отслеживать

6,641 6 6 золотых знаков 30 30 серебряных знаков 52 52 бронзовых знака

ответ дан 28 июл 2019 в 17:05

Анна Панина Анна Панина

21 1 1 бронзовый знак
Вариант 1, с использованием position: absolute
.container < position: relative; >.container img < position: absolute; >.container p
 
 
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque, nulla?
 
Вариант 2, с использованием background-image (нужно знать размеры блока)
.bg < background: url('https://d626yq9e83zk1.cloudfront.net/files/2017/12/26-770x425.jpg') center center no-repeat; width: 300px; height: 300px; >.bg span
 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, rerum. 
Отслеживать

ответ дан 14 фев 2018 в 4:31

2,298 1 1 золотой знак 9 9 серебряных знаков 12 12 бронзовых знаков
* < margin: 0; padding: 0; box-sizing: border-box; >.wrapper < display: grid; gap: 10px; grid-template-columns: 1fr; >.container < display: grid; place-items: end center; >.container img < width: 100%; object-fit: cover; >.container p < position: absolute; font-size: 20px; color: #fff; margin: 10px 10px 20px; > 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, fugiat. A, ipsum architecto sit nihil minus tenetur mollitia sequi est nostrum laudantium praesentium doloremque blanditiis recusandae, dolorum assumenda sed qui perspiciatis dolores? Quidem, itaque suscipit rerum, cupiditate delectus nesciunt dignissimos vel, odio corporis exercitationem facere nihil modi ducimus quas fugit.