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

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

Наложение текста поверх картинки 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, с которыми вы можете поэкспериментировать.

Как наложить текст на картинку в 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,651 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.